{{--
    Payment Confirmation Email - Atomic Design System v2.0
    Sent when a payment is successfully processed

    Note: $colors automatically injected via View Composer
--}}
@component('emails.layouts.base', [
    'title' => 'Payment Confirmed',
    'previewText' => 'Your payment has been successfully processed',
    'colors' => $colors
])

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

@component('emails.atoms.text', ['colors' => $colors])
    Thank you for your purchase!
@endcomponent

@component('emails.organisms.alert-box', [
    'variant' => 'success',
    'title' => 'Your payment has been successfully processed',
    'colors' => $colors
])
    Your tickets are confirmed and ready for the event.
@endcomponent

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

{{-- Payment Amount Highlight --}}
@component('emails.organisms.section', ['background' => 'primary', 'colors' => $colors])
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td align="center" style="padding: 20px;">
                <p style="margin: 0 0 {{ $spacing['1'] }}; 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'] }};">
                    Amount Paid
                </p>
                <div style="font-size: {{ $typography['sizes']['display'] }}; font-weight: {{ $typography['weights']['bold'] }}; color: {{ $colors['primary-600'] }}; font-family: {{ $typography['font-family'] }}; margin: {{ $spacing['1'] }} 0;">
                    {{ $currency }} {{ number_format($paymentAmount, 2) }}
                </div>
                <p style="margin: {{ $spacing['1'] }} 0 0; color: {{ $colors['neutral-600'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-family: {{ $typography['font-family'] }};">
                    {{ $paymentDate->format('F j, Y \a\t g:i A') }}
                </p>
            </td>
        </tr>
    </table>
@endcomponent

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

@component('emails.atoms.h3', ['colors' => $colors])
    Order Information
@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' => 'Email',
        'value' => $order->customer_email,
        'colors' => $colors
    ])
    @endcomponent

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

        @if($order->EventDetail->event_date)
            @component('emails.molecules.info-row', [
                'label' => 'Event Date',
                'value' => \Carbon\Carbon::parse($order->EventDetail->event_date)->format('F j, Y \a\t g:i A'),
                'colors' => $colors,
                'removeBorder' => true
            ])
            @endcomponent
        @endif
    @endif
@endcomponent

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

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

@component('emails.organisms.card', ['colors' => $colors])
    @component('emails.molecules.info-row', [
        'label' => 'Payment Method',
        'value' => ucfirst($paymentMethod),
        'colors' => $colors
    ])
    @endcomponent

    @component('emails.molecules.info-row', [
        'label' => 'Transaction ID',
        'value' => $transactionId,
        'colors' => $colors
    ])
    @endcomponent

    @component('emails.molecules.info-row', [
        'label' => 'Payment Status',
        'value' => 'Confirmed',
        'colors' => $colors,
        'removeBorder' => true
    ])
    @endcomponent
@endcomponent

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

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

    @php
        $tickets = $lineItems->where('item_type', 'ticket');
        $fees = $lineItems->where('item_type', 'booking_fee');
        $taxes = $lineItems->where('item_type', 'tax');
        $subtotal = $tickets->sum('amount');
    @endphp

    @component('emails.organisms.card', ['colors' => $colors])
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 0;">
            <thead>
                <tr>
                    <th style="background-color: {{ $colors['neutral-50'] }}; padding: {{ $spacing['2'] }}; text-align: left; font-weight: {{ $typography['weights']['semibold'] }}; color: {{ $colors['neutral-700'] }}; border-bottom: {{ $borders['width-medium'] }} solid {{ $colors['border-light'] }}; font-size: {{ $typography['sizes']['xs'] }}; text-transform: uppercase; letter-spacing: {{ $typography['letter-spacing']['wide'] }}; font-family: {{ $typography['font-family'] }};">
                        Item
                    </th>
                    <th style="background-color: {{ $colors['neutral-50'] }}; padding: {{ $spacing['2'] }}; text-align: center; font-weight: {{ $typography['weights']['semibold'] }}; color: {{ $colors['neutral-700'] }}; border-bottom: {{ $borders['width-medium'] }} solid {{ $colors['border-light'] }}; font-size: {{ $typography['sizes']['xs'] }}; text-transform: uppercase; letter-spacing: {{ $typography['letter-spacing']['wide'] }}; font-family: {{ $typography['font-family'] }};">
                        Qty
                    </th>
                    <th style="background-color: {{ $colors['neutral-50'] }}; padding: {{ $spacing['2'] }}; text-align: right; font-weight: {{ $typography['weights']['semibold'] }}; color: {{ $colors['neutral-700'] }}; border-bottom: {{ $borders['width-medium'] }} solid {{ $colors['border-light'] }}; font-size: {{ $typography['sizes']['xs'] }}; text-transform: uppercase; letter-spacing: {{ $typography['letter-spacing']['wide'] }}; font-family: {{ $typography['font-family'] }};">
                        Amount
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach($tickets as $ticket)
                <tr>
                    <td style="padding: {{ $spacing['2'] }}; border-bottom: {{ $borders['width-thin'] }} solid {{ $colors['border-light'] }};">
                        <strong style="color: {{ $colors['neutral-900'] }}; font-family: {{ $typography['font-family'] }};">Ticket</strong>
                        @if(isset($ticket->metadata['seat_number']))
                        <br><span style="color: {{ $colors['neutral-500'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-family: {{ $typography['font-family'] }};">Seat: {{ $ticket->metadata['seat_number'] }}</span>
                        @endif
                    </td>
                    <td style="padding: {{ $spacing['2'] }}; text-align: center; border-bottom: {{ $borders['width-thin'] }} solid {{ $colors['border-light'] }}; color: {{ $colors['neutral-700'] }}; font-family: {{ $typography['font-family'] }};">
                        {{ $ticket->quantity }}
                    </td>
                    <td style="padding: {{ $spacing['2'] }}; text-align: right; border-bottom: {{ $borders['width-thin'] }} solid {{ $colors['border-light'] }}; color: {{ $colors['neutral-700'] }}; font-family: {{ $typography['font-family'] }};">
                        {{ $currency }} {{ number_format($ticket->line_total ?? $ticket->unit_price ?? 0, 2) }}
                    </td>
                </tr>
                @endforeach

                @if($subtotal > 0)
                <tr>
                    <td colspan="2" style="padding: {{ $spacing['2'] }}; text-align: right; border-bottom: {{ $borders['width-thin'] }} solid {{ $colors['border-light'] }};">
                        <strong style="color: {{ $colors['neutral-900'] }}; font-family: {{ $typography['font-family'] }};">Subtotal</strong>
                    </td>
                    <td style="padding: {{ $spacing['2'] }}; text-align: right; border-bottom: {{ $borders['width-thin'] }} solid {{ $colors['border-light'] }};">
                        <strong style="color: {{ $colors['neutral-900'] }}; font-family: {{ $typography['font-family'] }};">{{ $currency }} {{ number_format($subtotal, 2) }}</strong>
                    </td>
                </tr>
                @endif

                @foreach($fees as $fee)
                <tr>
                    <td colspan="2" style="padding: {{ $spacing['2'] }}; text-align: right; border-bottom: {{ $borders['width-thin'] }} solid {{ $colors['border-light'] }}; color: {{ $colors['neutral-700'] }}; font-family: {{ $typography['font-family'] }};">
                        {{ $fee->description }}
                    </td>
                    <td style="padding: {{ $spacing['2'] }}; text-align: right; border-bottom: {{ $borders['width-thin'] }} solid {{ $colors['border-light'] }}; color: {{ $colors['neutral-700'] }}; font-family: {{ $typography['font-family'] }};">
                        {{ $currency }} {{ number_format($fee->line_total ?? $fee->unit_price ?? 0, 2) }}
                    </td>
                </tr>
                @endforeach

                @foreach($taxes as $tax)
                <tr>
                    <td colspan="2" style="padding: {{ $spacing['2'] }}; text-align: right; border-bottom: {{ $borders['width-thin'] }} solid {{ $colors['border-light'] }}; color: {{ $colors['neutral-700'] }}; font-family: {{ $typography['font-family'] }};">
                        {{ $tax->description }}
                    </td>
                    <td style="padding: {{ $spacing['2'] }}; text-align: right; border-bottom: {{ $borders['width-thin'] }} solid {{ $colors['border-light'] }}; color: {{ $colors['neutral-700'] }}; font-family: {{ $typography['font-family'] }};">
                        {{ $currency }} {{ number_format($tax->line_total ?? $tax->unit_price ?? 0, 2) }}
                    </td>
                </tr>
                @endforeach

                <tr style="background-color: {{ $colors['neutral-50'] }};">
                    <td colspan="2" style="padding: 15px {{ $spacing['2'] }}; text-align: right; font-size: {{ $typography['sizes']['base'] }};">
                        <strong style="color: {{ $colors['neutral-900'] }}; font-family: {{ $typography['font-family'] }};">TOTAL PAID</strong>
                    </td>
                    <td style="padding: 15px {{ $spacing['2'] }}; text-align: right; font-size: {{ $typography['sizes']['base'] }};">
                        <strong style="color: {{ $colors['neutral-900'] }}; font-family: {{ $typography['font-family'] }};">{{ $currency }} {{ number_format($paymentAmount, 2) }}</strong>
                    </td>
                </tr>
            </tbody>
        </table>
    @endcomponent
@endif

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

{{-- Embedded Tickets with QR Code or Barcode (based on event preference) --}}
@if($hasEmbeddedTickets)
    @php
        // Determine code type from first ticket (all tickets in same event use same type)
        $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;">
                                    <p style="margin: 0; color: {{ $colors['neutral-900'] }}; font-size: {{ $typography['sizes']['lg'] }}; font-weight: {{ $typography['weights']['bold'] }}; font-family: {{ $typography['font-family'] }};">
                                        {{ $currency }} {{ number_format($ticket['price'], 2) }}
                                    </p>
                                </td>
                            </tr>
                        </table>

                        {{-- QR Code or Barcode Section (conditional based on event preference) --}}
                        <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')
                                        {{-- CODE128 Barcode Display --}}
                                        <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
                                        {{-- QR Code Display (default) --}}
                                        <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>

                        {{-- Ticket Number Footer --}}
                        <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

    {{-- Offline Tip --}}
    @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

{{-- PDF Download / Attachment Notice --}}
@if($hasPdfAttachment)
    @component('emails.organisms.alert-box', [
        'variant' => 'success',
        'title' => 'Tickets Attached',
        'colors' => $colors
    ])
        Your tickets are attached to this email as a PDF. Perfect for printing or box office pickup.
    @endcomponent
@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' => 'secondary',
                    'size' => 'large',
                    'colors' => $colors
                ])
                    📥 Download Printable Tickets PDF
                @endcomponent
                <p style="margin: {{ $spacing['2'] }} 0 0; color: {{ $colors['neutral-500'] }}; font-size: {{ $typography['sizes']['xs'] }}; font-family: {{ $typography['font-family'] }};">
                    Link valid for 24 hours
                </p>
            </td>
        </tr>
    </table>
@endif

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

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td align="center">
            @component('emails.molecules.button', [
                'href' => $frontendUrl,
                'variant' => 'primary',
                'size' => 'large',
                'colors' => $colors
            ])
                View My Orders
            @endcomponent
        </td>
    </tr>
</table>

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

@component('emails.organisms.alert-box', [
    'variant' => 'info',
    'title' => 'Security Notice',
    'colors' => $colors
])
    This confirmation email serves as proof of purchase. Please keep it for your records. Do not share your ticket number or QR codes with anyone.
@endcomponent

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

@endcomponent