@extends('emails.layout')

@section('content')
<tr>
    <td style="padding: 0 40px;">
        <h1 style="color: #1a202c; font-size: 24px; font-weight: 600; margin: 0 0 16px 0;">
            New Payment Received
        </h1>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Hello {{ $adminName }},
        </p>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            A payment has been successfully processed on the platform. Here are the details:
        </p>

        <!-- Payment Summary -->
        <div style="background-color: #f7fafc; border-left: 4px solid #D7A769; padding: 20px; margin: 0 0 32px 0; border-radius: 4px;">
            <h2 style="color: #2d3748; font-size: 18px; font-weight: 600; margin: 0 0 16px 0;">
                Payment Summary
            </h2>
            
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td style="padding: 8px 0; color: #718096; font-size: 14px; width: 40%;">
                        <strong>Invoice Number:</strong>
                    </td>
                    <td style="padding: 8px 0; color: #2d3748; font-size: 14px;">
                        {{ $invoiceNumber }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: #718096; font-size: 14px;">
                        <strong>Payment Type:</strong>
                    </td>
                    <td style="padding: 8px 0; color: #2d3748; font-size: 14px;">
                        {{ $paymentType }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: #718096; font-size: 14px;">
                        <strong>Amount:</strong>
                    </td>
                    <td style="padding: 8px 0; color: #2d3748; font-size: 16px; font-weight: 600;">
                        {{ $amount }} {{ strtoupper($currency) }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: #718096; font-size: 14px;">
                        <strong>Payment Date:</strong>
                    </td>
                    <td style="padding: 8px 0; color: #2d3748; font-size: 14px;">
                        {{ $paymentDate }}
                    </td>
                </tr>
                @if(isset($transactionId))
                <tr>
                    <td style="padding: 8px 0; color: #718096; font-size: 14px;">
                        <strong>Transaction ID:</strong>
                    </td>
                    <td style="padding: 8px 0; color: #718096; font-size: 12px; font-family: monospace;">
                        {{ $transactionId }}
                    </td>
                </tr>
                @endif
            </table>
        </div>

        <!-- Customer Information -->
        <div style="margin: 0 0 32px 0;">
            <h3 style="color: #2d3748; font-size: 16px; font-weight: 600; margin: 0 0 12px 0;">
                Customer Information
            </h3>
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td style="padding: 6px 0; color: #718096; font-size: 14px; width: 40%;">
                        <strong>Name:</strong>
                    </td>
                    <td style="padding: 6px 0; color: #2d3748; font-size: 14px;">
                        {{ $userName }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 6px 0; color: #718096; font-size: 14px;">
                        <strong>Email:</strong>
                    </td>
                    <td style="padding: 6px 0; color: #2d3748; font-size: 14px;">
                        {{ $userEmail }}
                    </td>
                </tr>
                @if(isset($userId))
                <tr>
                    <td style="padding: 6px 0; color: #718096; font-size: 14px;">
                        <strong>User ID:</strong>
                    </td>
                    <td style="padding: 6px 0; color: #718096; font-size: 14px;">
                        #{{ $userId }}
                    </td>
                </tr>
                @endif
            </table>
        </div>

        @if(isset($items) && count($items) > 0)
        <!-- Items Details -->
        <div style="margin: 0 0 32px 0;">
            <h3 style="color: #2d3748; font-size: 16px; font-weight: 600; margin: 0 0 12px 0;">
                Payment Items
            </h3>
            <table style="width: 100%; border-collapse: collapse; background-color: #f7fafc; border-radius: 4px;">
                @foreach($items as $item)
                <tr>
                    <td style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0;">
                        <div style="color: #2d3748; font-size: 14px; font-weight: 500;">{{ $item['name'] }}</div>
                        @if(isset($item['description']))
                        <div style="color: #718096; font-size: 13px; margin-top: 4px;">{{ $item['description'] }}</div>
                        @endif
                    </td>
                    <td style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; text-align: right; white-space: nowrap;">
                        <span style="color: #4a5568; font-size: 14px;">{{ $item['amount'] }} {{ strtoupper($currency) }}</span>
                    </td>
                </tr>
                @endforeach
            </table>
        </div>
        @endif

        <p style="color: #718096; font-size: 14px; line-height: 20px; margin: 0;">
            This is an automated notification sent to all super administrators.
        </p>
    </td>
</tr>
@endsection