<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Payment Receipt</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .receipt-container {
            width: 600px;
            margin: auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .header {
            background: linear-gradient(to left, #158CF9, #CB8BFF);
            color: #fff;
            padding: 20px;
            text-align: center;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            margin-bottom: 20px;
        }

        .logo {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .details-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .details-table td {
            padding: 10px;
            font-size: 14px;
            color: #333;
        }

        .details-table td:first-child {
            font-weight: bold;
            color: #4a6a9d;
        }

        .summary-box {
            background-color: #f0f7ff;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .summary-box table {
            width: 100%;
            border-collapse: collapse;
        }

        .summary-box td {
            padding: 8px;
            font-size: 14px;
            color: #333;
        }

        .footer {
            text-align: center;
            font-size: 12px;
            color: #666;
            margin-top: 20px;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }

        a {
            color: #4a6a9d;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="receipt-container">
        <!-- Logo (Optional) -->


        <!-- Header -->
        <div class="header">
            <div class="logo">
                <img src="https://cdn.connector.cc/images/campaign/logo-white_121678815.png"
                    alt="Company Logo" style="max-width: 200px; height: auto;">
            </div>
            <!-- <h2>Receipt from Connector Club</h2> -->
            <p>Receipt #<%= paymentPdf.receipt_number %>
            </p>
        </div>


        <!-- Payment Details Table -->
        <table class="details-table">
            <tr>
                <td>Amount Paid:</td>
                <td>$<%= paymentPdf.amount %>
                        <%= paymentPdf.currency %>
                </td>
            </tr>
            <tr>
                <td>Date Paid:</td>
                <td>
                    <%= currentDate %>
                </td>
            </tr>
        </table>

        <!-- Summary Box -->
        <div class="summary-box">
            <table>
                <tr>
                    <td>Payment to <%= paymentPdf.name %>
                    </td>
                    <td>$<%= paymentPdf.amount %>
                            <%= paymentPdf.currency %>
                    </td>
                </tr>
                <% if(paymentPdf.platform_fees) { %>
                    <tr>
                        <td>Platform Fee</td>
                        <td>$<%= paymentPdf.platform_fees %>
                                <%= paymentPdf.currency %>
                        </td>
                    </tr>
                    <% } %>
                        <tr>
                            <td style="font-weight: bold;">Amount Paid</td>
                            <td style="font-weight: bold;">$<%= paymentPdf.total_amount %>
                                    <%= paymentPdf.currency %>
                            </td>
                        </tr>
            </table>
        </div>

        <!-- Footer -->
        <div class="footer">
            <p>If you have any questions, contact us at:</p>
            <p><a href="mailto:info@connector.cc">info@connector.cc</a></p>
            <!-- <p>You're receiving this email because you made a payment to connector club.</p> -->
        </div>
    </div>
</body>

</html>