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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transaction Receipt</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        .receipt-container {
            width: 600px;
            margin: 20px auto;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding-top: 20px;
        }

        .header .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-inline: 12px;
        }

        .header .top h2 {
            font-size: 24px;
            font-weight: bold;
            color: #a8a6a6;
            text-transform: uppercase;
        }

        .header .top img {
            max-width: 100px;
        }

        .header .date {
            background: #172541;
            color: white;
            text-align: center;
            padding: 10px 0;
            font-size: 18px;
            font-weight: bold;
        }

        .content h4 {
            color: #000;
            font-size: 14px;
            margin: 10px 0;
        }

        .content p {
            font-size: 14px;
            margin: 5px 0;
        }

        .content .bold {
            font-weight: bold;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th,
        table td {
            text-align: left;
            padding: 12px;
            border-bottom: 1px solid #ccc;
        }

        .disclaimer {
            font-size: 12px;
            color: #555;
            margin-top: 20px;
            border-top: 1px solid #ccc;
            padding: 10px;
        }

        .footer {
            margin-top: 20px;
            font-size: 12px;
            text-align: center;
            color: #fff;
            background-color: #172541;
        }

        .footer p {
            padding: 10px;
        }

        .print-btn {
            text-align: center;
            margin-bottom: 30px;
        }

        button {
            background-color: #172541;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        @media print {
            * {
                margin: 0;
                padding: 0;
            }

            .header .top {
                margin-bottom: 10px;
            }

            .receipt-container {
                border: none;
            }

            .print-btn {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="receipt-container">
        <div class="header">
            <div class="top">
                <h2>Transaction Receipt</h2>
                <img src="https://alphaedgecb.com/account/assets/img/brand/blue.png" alt="AlphaEdge Commercial Bank Logo">
            </div>
            <div class="date" id="transaction-date"></div>
        </div>
        <div class="content">
            <table>
                <tr>
                    <th>Transaction Type</th>
                    <td>Inter-Bank Transfer</td>
                </tr>
                <tr>
                    <th>Transaction Date</th>
                    <td id="transaction-datetime"></td>
                </tr>
                <tr>
                    <th>Debit Account</th>
                    <td>STANLEY (2089****)</td>
                </tr>
                <tr>
                    <th>Credit Account</th>
                    <td>1234567890</td>
                </tr>
                <tr>
                    <th>Beneficiary</th>
                    <td>CHI CHI</td>
                </tr>
                <tr>
                    <th>Bank</th>
                    <td>QPAY</td>
                </tr>
                <tr>
                    <th>Narration</th>
                    <td>Gen part payment</td>
                </tr>
                <tr>
                    <th>Status</th>
                    <td>Success</td>
                </tr>
                <tr>
                    <th>Amount</th>
                    <td>₦50,000.00</td>
                </tr>
            </table>
        </div>
        <div class="disclaimer">
            <p><strong>DISCLAIMER:</strong> Transaction initiated successfully; it will take 2-3 working days to credit funds in receiver's account. A detail of this transaction has been recorded in your e-statement and email. We recommend you contact the receiver of the fund to await 2-3 working days.</p>
        </div>
        <div class="footer">
            <p>For any other assistance, kindly contact us at info@alphaedgecb.com and 01</p>
        </div>
    </div>
    <div class="print-btn">
        <button onclick="window.print()">Print</button>
    </div>

    <script>
        // Set the transaction date (this can be dynamic)
        const transactionDate = new Date('2025-01-24'); // Example date, adjust as needed
        const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        const formattedDate = transactionDate.toLocaleDateString('en-US', dateOptions);
        document.getElementById('transaction-date').textContent = formattedDate;
        
        // For the Transaction Date formatted timestamp
        const formattedDateTime = transactionDate.toLocaleString('en-US');
        document.getElementById('transaction-datetime').textContent = formattedDateTime;
    </script>
</body>

</html>