{{--
    Complimentary Ticket Email - COMP-001
    Sent when complimentary (guest) tickets are issued

    Simplified version without payment details - focuses on ticket delivery
    Note: $colors automatically injected via View Composer
--}}
@component('emails.layouts.base', [
    'title' => 'Your Tickets',
    'previewText' => 'Your complimentary tickets are ready',
    'colors' => $colors
])

@component('emails.atoms.h1', ['colors' => $colors])
    Your Tickets Are Ready
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    You've been issued {{ $ticketCount }} complimentary {{ $ticketCount === 1 ? 'ticket' : 'tickets' }} for {{ $eventName }}.
@endcomponent

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

@component('emails.organisms.alert-box', [
    'variant' => 'success',
    'title' => 'Complimentary Guest Tickets',
    'colors' => $colors
])
    Your tickets have been confirmed. Please bring them to the venue entrance.
@endcomponent

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

{{-- PDF Download / Attachment Notice --}}
@if($hasPdfAttachment)
    @component('emails.organisms.alert-box', [
        'variant' => 'info',
        'title' => 'Your Tickets',
        'colors' => $colors
    ])
        Your tickets are attached to this email as a PDF. Please print or display on your mobile device at the venue.
    @endcomponent

    @include('emails.atoms.spacer', ['height' => '20px'])
@elseif($downloadUrl)
    @component('emails.organisms.alert-box', [
        'variant' => 'warning',
        'title' => 'Download Your Tickets',
        'colors' => $colors
    ])
        Your tickets are ready for download. Click the button below to get your printable PDF.
    @endcomponent

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

    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td align="center">
                @component('emails.molecules.button', [
                    'href' => $downloadUrl,
                    'variant' => 'primary',
                    'colors' => $colors
                ])
                    Download Tickets (PDF)
                @endcomponent
            </td>
        </tr>
    </table>

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

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

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

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

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

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

        @if($order->EventDetail->venue_name)
            @component('emails.molecules.info-row', [
                'label' => 'Venue',
                'value' => $order->EventDetail->venue_name,
                'colors' => $colors
            ])
            @endcomponent
        @endif

        @if($order->EventDetail->start_date)
            @php
            $datePart = \Carbon\Carbon::parse($order->EventDetail->start_date)->format('Y-m-d');
            $timePart = $order->EventDetail->start_time ?? '00:00:00';
            $eventDateTime = $datePart . ' ' . $timePart;
            @endphp
            @component('emails.molecules.info-row', [
                'label' => 'Date & Time',
                'value' => \Carbon\Carbon::parse($eventDateTime)->format('l, F j, Y \a\t g:i A'),
                'colors' => $colors,
                'removeBorder' => true
            ])
            @endcomponent
        @endif
    @endif
@endcomponent

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

{{-- Seat Information --}}
@php
    $tickets = $order->lineItems->where('item_type', 'ticket');
@endphp

@if($tickets->count() > 0)
    @component('emails.atoms.h3', ['colors' => $colors])
        Your Seats
    @endcomponent

    @component('emails.organisms.card', ['colors' => $colors])
        @foreach($tickets as $index => $ticket)
            @component('emails.molecules.info-row', [
                'label' => 'Seat ' . ($index + 1),
                'value' => $ticket->metadata['seat_number'] ?? $ticket->description ?? 'General Admission',
                'colors' => $colors,
                'removeBorder' => $loop->last
            ])
            @endcomponent
        @endforeach
    @endcomponent

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

{{-- Embedded Tickets with QR Code or Barcode --}}
@if($hasEmbeddedTickets)
    @php
        $codeType = $embeddedTickets[0]['code_type'] ?? 'qr';
        $codeLabel = $codeType === 'barcode' ? 'barcodes' : 'QR codes';
    @endphp

    @component('emails.atoms.h2', ['colors' => $colors])
        Your Tickets
    @endcomponent

    @component('emails.atoms.text', ['colors' => $colors])
        Present these {{ $codeLabel }} at the venue entrance. Save this email for offline access.
    @endcomponent

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

    @foreach($embeddedTickets as $ticket)
        @component('emails.organisms.card', ['colors' => $colors])
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="padding: {{ $spacing['3'] }};">
                        {{-- Ticket Header --}}
                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: {{ $spacing['3'] }};">
                            <tr>
                                <td>
                                    <h3 style="margin: 0; color: {{ $colors['primary-600'] }}; font-size: {{ $typography['sizes']['lg'] }}; font-weight: {{ $typography['weights']['bold'] }}; font-family: {{ $typography['font-family'] }};">
                                        Seat {{ $ticket['seat_number'] }}
                                    </h3>
                                    <p style="margin: {{ $spacing['1'] }} 0 0; color: {{ $colors['neutral-600'] }}; font-size: {{ $typography['sizes']['sm'] }}; font-family: {{ $typography['font-family'] }};">
                                        {{ $ticket['description'] }}
                                    </p>
                                </td>
                                <td align="right" style="vertical-align: top;">
                                    @component('emails.molecules.badge', [
                                        'variant' => 'success',
                                        'colors' => $colors
                                    ])
                                        GUEST
                                    @endcomponent
                                </td>
                            </tr>
                        </table>

                        {{-- QR Code or Barcode Section --}}
                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: {{ $colors['neutral-50'] }}; border-radius: {{ $borders['radius-md'] }}; overflow: hidden;">
                            <tr>
                                <td align="center" style="padding: {{ $spacing['4'] }};">
                                    @if($codeType === 'barcode')
                                        <img src="{{ $ticket['code_image'] }}"
                                             width="280"
                                             height="60"
                                             alt="{{ $ticket['code_alt_text'] }}"
                                             style="display: block; margin: 0 auto; border: {{ $borders['width-medium'] }} solid {{ $colors['neutral-200'] }}; border-radius: {{ $borders['radius-sm'] }}; background-color: white; padding: {{ $spacing['2'] }};">
                                        <p style="margin: {{ $spacing['3'] }} 0 0; color: {{ $colors['neutral-600'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-weight: {{ $typography['weights']['semibold'] }}; text-transform: uppercase; letter-spacing: {{ $typography['letter-spacing']['wide'] }}; font-family: {{ $typography['font-family'] }};">
                                            Scan Barcode at Venue
                                        </p>
                                    @else
                                        <img src="{{ $ticket['code_image'] }}"
                                             width="200"
                                             height="200"
                                             alt="{{ $ticket['code_alt_text'] }}"
                                             style="display: block; margin: 0 auto; border: {{ $borders['width-medium'] }} solid {{ $colors['neutral-200'] }}; border-radius: {{ $borders['radius-sm'] }};">
                                        <p style="margin: {{ $spacing['3'] }} 0 0; color: {{ $colors['neutral-600'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-weight: {{ $typography['weights']['semibold'] }}; text-transform: uppercase; letter-spacing: {{ $typography['letter-spacing']['wide'] }}; font-family: {{ $typography['font-family'] }};">
                                            Scan at Venue Entrance
                                        </p>
                                    @endif
                                </td>
                            </tr>
                        </table>

                        <p style="margin: {{ $spacing['2'] }} 0 0; color: {{ $colors['neutral-500'] }}; font-size: {{ $typography['sizes']['xs'] }}; text-align: center; font-family: {{ $typography['font-family'] }};">
                            Ticket: {{ $ticket['ticket_number'] }}
                        </p>
                    </td>
                </tr>
            </table>
        @endcomponent

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

    @component('emails.organisms.alert-box', [
        'variant' => 'info',
        'title' => 'Pro Tip',
        'colors' => $colors
    ])
        Screenshot this email or save it offline before arriving at the venue. Venue wifi may be unreliable.
    @endcomponent

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

@component('emails.organisms.alert-box', [
    'variant' => 'info',
    'title' => 'Important',
    'colors' => $colors
])
    Please keep this email as your ticket confirmation. Do not share your ticket codes with anyone.
@endcomponent

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

@component('emails.atoms.small', ['colors' => $colors])
    Questions? Contact us at <a href="mailto:{{ $supportEmail }}" style="color: {{ $colors['primary-600'] }};">{{ $supportEmail }}</a>
@endcomponent

{{-- Email Open Tracking Pixel --}}
@if($trackingPixelUrl)
    <img src="{{ $trackingPixelUrl }}" width="1" height="1" style="display:none;" alt="">
@endif

@endcomponent