@extends('emails.layouts.base')

@section('content')
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
    {{-- Header --}}
    <div style="text-align: center; margin-bottom: 30px;">
        <h1 style="color: #1a1a1a; margin: 0; font-size: 24px;">Your Seats Have Been Changed</h1>
        <p style="color: #666; margin-top: 10px;">New tickets are attached to this email</p>
    </div>

    {{-- Greeting --}}
    <p style="color: #333; font-size: 16px; line-height: 1.6;">
        Dear {{ $customerName }},
    </p>

    <p style="color: #333; font-size: 16px; line-height: 1.6;">
        Your seats for <strong>{{ $eventName }}</strong> have been changed. Please see the details below and find your new tickets attached.
    </p>

    {{-- Seat Change Details --}}
    <div style="background-color: #f8f9fa; border-radius: 8px; padding: 20px; margin: 20px 0;">
        <h2 style="color: #1a1a1a; font-size: 18px; margin: 0 0 15px 0;">Seat Change Details</h2>

        <table style="width: 100%; border-collapse: collapse;">
            <tr>
                <td style="padding: 10px 0; color: #666; width: 40%;">Previous Seats:</td>
                <td style="padding: 10px 0; color: #333; font-weight: bold;">{{ $oldSeats }}</td>
            </tr>
            <tr>
                <td style="padding: 10px 0; color: #666;">New Seats:</td>
                <td style="padding: 10px 0; color: #2e7d32; font-weight: bold;">{{ $newSeats }}</td>
            </tr>
            <tr>
                <td style="padding: 10px 0; color: #666;">Order Number:</td>
                <td style="padding: 10px 0; color: #333;">{{ $orderNumber }}</td>
            </tr>
            <tr>
                <td style="padding: 10px 0; color: #666;">Changed On:</td>
                <td style="padding: 10px 0; color: #333;">{{ $changedAt }}</td>
            </tr>
        </table>
    </div>

    {{-- Reason --}}
    @if($reason)
    <div style="background-color: #fff3e0; border-left: 4px solid #ff9800; padding: 15px; margin: 20px 0;">
        <p style="margin: 0; color: #333; font-size: 14px;">
            <strong>Reason for change:</strong> {{ $reason }}
        </p>
    </div>
    @endif

    {{-- Price Adjustment --}}
    @if($adjustmentType !== 'none')
    <div style="background-color: {{ $adjustmentType === 'upgrade' ? '#fff3e0' : '#e8f5e9' }}; border-radius: 8px; padding: 15px; margin: 20px 0;">
        <p style="margin: 0; color: #333; font-size: 14px;">
            <strong>Payment {{ $adjustmentType === 'upgrade' ? 'Required' : 'Refund' }}:</strong>
            {{ $adjustmentText }}
        </p>
    </div>
    @endif

    {{-- Download Button --}}
    @if($downloadUrl)
    <div style="text-align: center; margin: 30px 0;">
        <a href="{{ $downloadUrl }}"
           style="display: inline-block; background-color: #1976d2; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 16px;">
            Download Your New Tickets
        </a>
    </div>
    @endif

    {{-- Important Notice --}}
    <div style="background-color: #ffebee; border-radius: 8px; padding: 15px; margin: 20px 0;">
        <p style="margin: 0; color: #c62828; font-size: 14px;">
            <strong>Important:</strong> Your previous tickets are no longer valid. Please use the new tickets attached to this email or download them using the button above.
        </p>
    </div>

    {{-- Footer --}}
    <p style="color: #666; font-size: 14px; line-height: 1.6; margin-top: 30px;">
        If you have any questions about this change, please contact us at
        <a href="mailto:{{ $supportEmail }}" style="color: #1976d2;">{{ $supportEmail }}</a>
    </p>

    <p style="color: #666; font-size: 14px; line-height: 1.6;">
        Thank you for your understanding,<br>
        The GlobalGala Team
    </p>
</div>
@endsection