@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;">
            Payment Confirmation
        </h1>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Dear {{ $userName }},
        </p>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Thank you for your payment. We have successfully received your payment. Below are the details of your transaction:
        </p>

        <!-- Payment Details Table -->
        <table style="width: 100%; border-collapse: collapse; margin: 0 0 32px 0; background-color: #f7fafc; border-radius: 8px;">
            <tr>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #2d3748; font-size: 14px;">Invoice Number:</strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px;">{{ $invoiceNumber }}</span>
                </td>
            </tr>
            <tr>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #2d3748; font-size: 14px;">Payment Date:</strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px;">{{ $paymentDate }}</span>
                </td>
            </tr>
            <tr>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #2d3748; font-size: 14px;">Amount Paid:</strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #2d3748; font-size: 16px; font-weight: 600;">{{ $amount }} {{ strtoupper($currency) }}</span>
                </td>
            </tr>
            @if(isset($paymentMethod))
            <tr>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #2d3748; font-size: 14px;">Payment Method:</strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px; text-transform: capitalize;">{{ $paymentMethod }}</span>
                </td>
            </tr>
            @endif
            @if(isset($transactionId))
            <tr>
                <td style="padding: 16px 20px;">
                    <strong style="color: #2d3748; font-size: 14px;">Transaction ID:</strong>
                </td>
                <td style="padding: 16px 20px; text-align: right;">
                    <span style="color: #718096; font-size: 12px; font-family: monospace;">{{ $transactionId }}</span>
                </td>
            </tr>
            @endif
        </table>

        @if(isset($items) && count($items) > 0)
        <!-- Items Purchased -->
        <h2 style="color: #2d3748; font-size: 18px; font-weight: 600; margin: 0 0 16px 0;">
            Items Purchased
        </h2>
        <table style="width: 100%; border-collapse: collapse; margin: 0 0 32px 0;">
            @foreach($items as $item)
            <tr>
                <td style="padding: 12px 0; 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 0; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px;">{{ $item['amount'] }} {{ strtoupper($currency) }}</span>
                </td>
            </tr>
            @endforeach
        </table>
        @endif

        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            A receipt for this transaction has been saved to your account. You can view it anytime by logging into your dashboard.
        </p>

        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0;">
            If you have any questions about this payment, please don't hesitate to contact our support team.
        </p>
    </td>
</tr>
@endsection