@component('mail::message')
{{-- Header Greeting --}}
# Hello {{ $recipientName }}!

Your registration for **{{ $eventTitle }}** has been successfully confirmed.

{{-- Event Details Card --}}
@component('mail::panel')
## 📅 Event Details

- **Event:** {{ $eventTitle }}
- **Date:** {{ $eventDate }}
- **Venue:** {{ $eventVenue }}
- **Registration Type:** {{ $registrationType }}
- **Registered On:** {{ $registrationTime }}
@endcomponent

{{-- Participant Details Section --}}
## 👥 Participant Details

@if($participantCount === 1)
{{-- Individual Registration --}}
**Your UID:** {{ $participants[0]['reg_uid'] }}  
**Game Path:** {{ $participants[0]['game_path'] }}
@else
{{-- Team/Pair Registration --}}
**Team/Pair Members:**

@foreach($participants as $index => $participant)
{{ $index + 1 }}. {{ $participant['name'] }}@if($participant['is_recipient']) **(You)**@endif - UID: {{ $participant['reg_uid'] }}  
       Game Path: {{ $participant['game_path'] }}
@endforeach
@endif

---

{{-- Payment Details Section (Invoice Style) --}}
@if($hasPayment)
## 💳 Payment Receipt

@component('mail::table')
| Detail | Value |
|:-------|:------|
| **Transaction ID** | {{ $transactionId }} |
| **Payment Method** | {{ $paymentMethod }} |
| **Payment Date** | {{ $paymentDate }} |
| **Status** | {!! $paymentStatusBadge !!} |
@endcomponent

### Payment Breakdown

@if($participantCount === 1)
{{-- Individual Payment --}}
<div style="background: #f8f9fa; padding: 15px; border-radius: 5px; margin: 15px 0;">
    <p style="margin: 0; font-size: 14px; color: #6c757d;">Registration Fee</p>
    <p style="margin: 5px 0 0 0; font-size: 24px; font-weight: bold; color: #28a745;">
        ₹{{ number_format($totalAmount, 2) }}
    </p>
</div>
@else
{{-- Team/Pair Payment with Share Breakdown --}}
<div style="background: #f8f9fa; padding: 15px; border-radius: 5px; margin: 15px 0;">
    <table style="width: 100%; border-collapse: collapse;">
        <tr>
            <td style="padding: 8px 0; color: #6c757d; font-size: 14px;">Your Share:</td>
            <td style="padding: 8px 0; text-align: right; font-size: 20px; font-weight: bold; color: #007bff;">
                ₹{{ number_format($userShareAmount, 2) }}
            </td>
        </tr>
        <tr style="border-top: 1px solid #dee2e6;">
            <td style="padding: 8px 0; color: #6c757d; font-size: 14px;">Total Team Payment:</td>
            <td style="padding: 8px 0; text-align: right; font-size: 20px; font-weight: bold; color: #28a745;">
                ₹{{ number_format($totalAmount, 2) }}
            </td>
        </tr>
    </table>
    <p style="margin: 10px 0 0 0; font-size: 12px; color: #6c757d; text-align: center;">
        (Split equally among {{ $participantCount }} participants)
    </p>
</div>
@endif

{{-- Payment Status Message --}}
@if($isPaid)
@component('mail::panel')
✅ **Payment Confirmed**

Your payment has been successfully processed and confirmed. Your registration is now complete.
@endcomponent
@else
@component('mail::panel')
⏳ **Payment Pending**

Your payment is currently pending. Please complete the payment to confirm your registration.
@endcomponent
@endif

@else
{{-- Free Event --}}
@component('mail::panel')
## 🎉 Free Registration

This is a free event. No payment is required. Your registration is confirmed!
@endcomponent
@endif

{{-- Call to Action Button --}}
@component('mail::button', ['url' => $eventUrl, 'color' => 'primary'])
View Event Details
@endcomponent

---

<div style="text-align: center; color: #6c757d; font-size: 13px; margin-top: 30px;">
    <p>If you have any questions, please contact the event organizer.</p>
    <p style="margin-top: 10px;">Thank you for registering!</p>
</div>

Best regards,<br>
{{ config('app.name') }}
@endcomponent