{{--
    Ticket Email - Atomic Composable v2.0 (Luxury Edition)
    Sent with order confirmation, displays ticket with QR code

    Variables:
    - $ticketNumber: Unique ticket identifier
    - $event: Event model/object with event details
    - $order: Order model/object
    - $seatNumber: Seat identifier (e.g., "A-12")
    - $sectionName: Section name (optional)
    - $price: Ticket price
    - $customerName: Customer full name
    - $qrCodeBase64: Base64 encoded QR code image
    - $ticketUrl: URL to download full ticket PDF

    Note: All design tokens auto-injected via View Composer
--}}
@component('emails.layouts.base', [
    'title' => 'Your Ticket - ' . $event->name,
    'previewText' => 'Your ticket for ' . $event->name . ' - Seat ' . $seatNumber
])

{{-- Ticket Header --}}
@component('emails.atoms.h1')
    Your Ticket is Ready
@endcomponent

@component('emails.atoms.text')
    Thank you for your purchase! Your ticket for <strong>{{ $event->name }}</strong> is confirmed and ready to use.
@endcomponent

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

{{-- Ticket Card with QR Code --}}
@component('emails.organisms.card')
    {{-- Event Name --}}
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: {{ $spacing['4'] }};">
        <tr>
            <td style="border-bottom: {{ $borders['width-medium'] }} solid {{ $colors['primary-500'] }}; padding-bottom: {{ $spacing['3'] }};">
                <h2 style="margin: 0; color: {{ $colors['neutral-900'] }}; font-size: {{ $typography['sizes']['h2'] }}; font-weight: {{ $typography['weights']['light'] }}; font-family: {{ $typography['font-family'] }};">
                    {{ $event->name }}
                </h2>
            </td>
        </tr>
    </table>

    {{-- Event Details --}}
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: {{ $spacing['5'] }};">
        <tr>
            <td style="padding: {{ $spacing['3'] }} 0;">
                <p style="margin: 0 0 {{ $spacing['1'] }}; color: {{ $colors['neutral-700'] }}; font-size: {{ $typography['sizes']['base'] }}; font-weight: {{ $typography['weights']['medium'] }}; font-family: {{ $typography['font-family'] }};">
                    {{ \Carbon\Carbon::parse($event->start_date)->format('l, F j, Y') }}
                    @if($event->start_time)
                        at {{ \Carbon\Carbon::parse($event->start_time)->format('g:i A') }}
                    @endif
                </p>
                @if($event->address)
                <p style="margin: 0; color: {{ $colors['neutral-600'] }}; font-size: {{ $typography['sizes']['sm'] }}; font-family: {{ $typography['font-family'] }};">
                    {{ $event->address }}
                </p>
                @endif
            </td>
        </tr>
    </table>

    {{-- Ticket Details Grid --}}
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: {{ $spacing['5'] }};">
        <tr>
            {{-- Left Column: Seat Info --}}
            <td width="50%" style="padding: {{ $spacing['3'] }}; background-color: {{ $colors['neutral-50'] }}; border-radius: {{ $borders['radius-md'] }}; vertical-align: top;">
                <p style="margin: 0 0 {{ $spacing['1'] }}; color: {{ $colors['neutral-500'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-weight: {{ $typography['weights']['semibold'] }}; text-transform: uppercase; letter-spacing: {{ $typography['letter-spacing']['wide'] }}; font-family: {{ $typography['font-family'] }};">
                    Seat Number
                </p>
                <p style="margin: 0; color: {{ $colors['neutral-900'] }}; font-size: {{ $typography['sizes']['h3'] }}; font-weight: {{ $typography['weights']['bold'] }}; font-family: {{ $typography['font-family'] }};">
                    {{ $seatNumber }}
                </p>
                @if($sectionName)
                <p style="margin: {{ $spacing['1'] }} 0 0; color: {{ $colors['neutral-600'] }}; font-size: {{ $typography['sizes']['sm'] }}; font-family: {{ $typography['font-family'] }};">
                    Section: {{ $sectionName }}
                </p>
                @endif
            </td>

            {{-- Spacer --}}
            <td width="4%"></td>

            {{-- Right Column: Price & Ticket # --}}
            <td width="46%" style="padding: {{ $spacing['3'] }}; background-color: {{ $colors['neutral-50'] }}; border-radius: {{ $borders['radius-md'] }}; vertical-align: top;">
                <p style="margin: 0 0 {{ $spacing['1'] }}; color: {{ $colors['neutral-500'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-weight: {{ $typography['weights']['semibold'] }}; text-transform: uppercase; letter-spacing: {{ $typography['letter-spacing']['wide'] }}; font-family: {{ $typography['font-family'] }};">
                    Ticket Price
                </p>
                <p style="margin: 0; color: {{ $colors['primary-600'] }}; font-size: {{ $typography['sizes']['h3'] }}; font-weight: {{ $typography['weights']['bold'] }}; font-family: {{ $typography['font-family'] }};">
                    {{ $event->currency ?? 'EGP' }} {{ number_format($price, 2) }}
                </p>
                <p style="margin: {{ $spacing['2'] }} 0 {{ $spacing['1'] }}; color: {{ $colors['neutral-500'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-family: {{ $typography['font-family'] }};">
                    Ticket #{{ $ticketNumber }}
                </p>
            </td>
        </tr>
    </table>

    {{-- Customer Info --}}
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: {{ $spacing['5'] }}; background-color: {{ $colors['white'] }}; border: {{ $borders['width-thin'] }} solid {{ $colors['neutral-200'] }}; border-radius: {{ $borders['radius-md'] }};">
        <tr>
            <td style="padding: {{ $spacing['3'] }};">
                <p style="margin: 0 0 {{ $spacing['1'] }}; color: {{ $colors['neutral-500'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-weight: {{ $typography['weights']['semibold'] }}; text-transform: uppercase; letter-spacing: {{ $typography['letter-spacing']['wide'] }}; font-family: {{ $typography['font-family'] }};">
                    Ticket Holder
                </p>
                <p style="margin: 0; color: {{ $colors['neutral-900'] }}; font-size: {{ $typography['sizes']['md'] }}; font-weight: {{ $typography['weights']['semibold'] }}; font-family: {{ $typography['font-family'] }};">
                    {{ $customerName }}
                </p>
            </td>
        </tr>
    </table>

    {{-- QR Code Section --}}
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: {{ $colors['neutral-50'] }}; border-radius: {{ $borders['radius-md'] }}; padding: {{ $spacing['5'] }};">
        <tr>
            <td align="center">
                <p style="margin: 0 0 {{ $spacing['3'] }}; color: {{ $colors['neutral-900'] }}; font-size: {{ $typography['sizes']['md'] }}; font-weight: {{ $typography['weights']['semibold'] }}; font-family: {{ $typography['font-family'] }};">
                    Present this QR code at the entrance
                </p>

                {{-- QR Code Image --}}
                <div style="background: {{ $colors['white'] }}; padding: {{ $spacing['3'] }}; border: {{ $borders['width-medium'] }} solid {{ $colors['neutral-200'] }}; border-radius: {{ $borders['radius-md'] }}; display: inline-block; margin-bottom: {{ $spacing['2'] }};">
                    <img src="data:image/png;base64,{{ $qrCodeBase64 }}" alt="Ticket QR Code" style="width: 200px; height: 200px; display: block;">
                </div>

                <p style="margin: 0; color: {{ $colors['neutral-500'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-family: {{ $typography['font-family'] }};">
                    Scan to validate entry
                </p>
            </td>
        </tr>
    </table>
@endcomponent

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

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

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

{{-- Important Information --}}
@component('emails.organisms.alert-box', ['variant' => 'warning', 'title' => 'Important Information'])
    <strong>This ticket is valid for one person only.</strong> Please present either this email or your downloaded PDF ticket at the entrance. Lost or stolen tickets cannot be replaced.
@endcomponent

@component('emails.organisms.alert-box', ['variant' => 'info', 'title' => 'Need Help?'])
    For any questions about your ticket or the event, please contact our support team at <a href="mailto:{{ config('mail.from.address') }}" style="color: {{ $colors['primary-600'] }}; text-decoration: underline;">{{ config('mail.from.address') }}</a>
@endcomponent

@component('emails.atoms.text')
    Enjoy the show!<br>
    <strong>The Global Gala Team</strong>
@endcomponent

@endcomponent