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

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Transaction Receipt</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family: DejaVu Sans, Arial, sans-serif;
                font-size: 11px;
                color: #1a2332;
                background: #ffffff;
                line-height: 1.5;
            }

            .wrapper {
                width: 100%;
                max-width: 620px;
                margin: 0 auto;
                background: #ffffff;
                border: 1px solid #d0d7e2;
            }

            .header {
                padding: 18px 28px;
                border-bottom: 1px solid #dde3ea;
                background: #ffffff;
            }

            .hero-banner {
                background-color: #2f5597;
                padding: 14px 28px;
            }

            .hero-banner h1 {
                font-size: 13px;
                font-weight: bold;
                color: #ffffff;
                letter-spacing: 0.03em;
            }

            .body-content {
                padding: 24px 28px 20px;
            }

            .section-title {
                font-size: 16px;
                font-weight: bold;
                color: #1a2332;
                margin-bottom: 8px;
            }

            .sub-heading {
                font-size: 9px;
                font-weight: bold;
                color: #2f5597;
                text-transform: uppercase;
                letter-spacing: 0.07em;
                border-bottom: 2px solid #d6e0f0;
                padding-bottom: 4px;
                margin-bottom: 8px;
                margin-top: 2px;
            }

            .info-table {
                width: 100%;
                border-collapse: collapse;
                margin-bottom: 20px;
                border: 1px solid #d0d7e2;
            }

            .info-table tr {
                border-bottom: 1px solid #d0d7e2;
            }

            .info-table tr:last-child {
                border-bottom: none;
            }

            .info-table td {
                padding: 8px 12px;
                font-size: 10px;
                vertical-align: top;
            }

            .info-table td.label {
                font-weight: bold;
                color: #1a2332;
                width: 36%;
                background-color: #f7f9fc;
            }

            .info-table td.value {
                color: #2d3a4a;
            }

            .amount-bold {
                font-weight: bold;
                font-size: 11px;
            }

            .footer-disclaimer {
                font-size: 8.5px;
                color: #6b7a8d;
                line-height: 1.6;
                border-top: 1px solid #dde3ea;
                padding-top: 14px;
            }

            .footer-bar {
                background-color: #1a2332;
                padding: 12px 28px;
                margin-top: 20px;
            }

            .footer-bar-table {
                width: 100%;
                border-collapse: collapse;
            }

            .footer-bar-table td {
                vertical-align: middle;
            }

            .footer-copy {
                font-size: 8px;
                color: #8a99ad;
            }

            .footer-copy strong {
                color: #c5cdd8;
            }

            .social-box {
                display: inline-block;
                width: 20px;
                height: 20px;
                background-color: #2f5597;
                color: #ffffff;
                font-size: 8px;
                font-weight: bold;
                text-align: center;
                padding-top: 5px;
                margin-left: 3px;
            }
        </style>
    </head>

    <body>

        <div class="wrapper">

            <!-- Header -->
            <div class="header">
                <img src="{{ public_path(config('app.assets.logo')) }}" alt="{{ config('app.name') }} Logo"
                    style="width:200px; display:block;" />
            </div>

            <!-- Hero Banner -->
            <div class="hero-banner">
                <h1>Transaction Receipt</h1>
            </div>

            <!-- Body -->
            <div class="body-content">

                <div class="section-title">{{ $transaction->direction->label() }} Transaction Details</div>

                <!-- Transaction Details -->
                <table class="info-table">
                    <tr>
                        <td class="label">Date/Time:</td>
                        <td class="value">
                            {{ date('M jS, Y g:i A', strtotime($transaction->transaction_at)) }}
                        </td>
                    </tr>
                    <tr>
                        <td class="label">Transaction Type:</td>
                        <td class="value">{{ $transaction->type->label() }}</td>
                    </tr>
                    <tr>
                        <td class="label">Amount:</td>
                        <td class="value"><span class="amount-bold">{{ currency($user->currency, 'code') }}
                                {{ formatAmount($transaction->amount) }}</span></td>
                    </tr>
                    <tr>
                        <td class="label">Reference ID:</td>
                        <td class="value">{{ $transaction->reference_id }}</td>
                    </tr>
                    <tr>
                        <td class="label">Description:</td>
                        <td class="value">{{ $transaction->description }}</td>
                    </tr>
                    <tr>
                        <td class="label">Transaction Status:</td>
                        <td class="value">{{ $transaction->status->label() }}</td>
                    </tr>
                </table>

                @if ($transfer)
                    <!-- Sender Details -->
                    <div class="sub-heading">Sender Details</div>
                    <table class="info-table">
                        <tr>
                            <td class="label">Sender:</td>
                            <td class="value">{{ $transfer->user->fullName() }}</td>
                        </tr>
                        <tr>
                            <td class="label">Sender Bank:</td>
                            <td class="value">{{ $transfer->sender_bank }}</td>
                        </tr>
                    </table>
                @endif

                @if ($transfer)
                    <!-- Recipient Details -->
                    <div class="sub-heading">Recipient Details</div>
                    <table class="info-table">
                        <tr>
                            <td class="label">Account Name:</td>
                            <td class="value">{{ $transfer->recipient_name }}</td>
                        </tr>
                        <tr>
                            <td class="label">Account Number:</td>
                            <td class="value">{{ maskAccountNumber($transfer->recipient_account_number) }}</td>
                        </tr>
                        @if ($transfer->recipient_swift_code)
                            <tr>
                                <td class="label">SWIFT Code:</td>
                                <td class="value">{{ $transfer->recipient_swift_code }}</td>
                            </tr>
                        @endif
                        <tr>
                            <td class="label">Transfer Type:</td>
                            <td class="value">{{ $transfer->transfer_type->fullLabel() }}</td>
                        </tr>
                    </table>
                @endif

                <!-- Disclaimer -->
                <p class="footer-disclaimer">
                    <strong>Disclaimer:</strong>&nbsp;
                    This is a system-generated receipt and does not require a signature. All transactions are
                    subject to our terms and conditions and fraud monitoring systems. This receipt does not
                    contain your full account number.
                </p>

            </div><!-- /body-content -->

            <!-- Footer Bar -->
            <div class="footer-bar">
                <table class="footer-bar-table">
                    <tr>
                        <td>
                            <span class="footer-copy">
                                &copy; {{ date('Y') }} <strong>{{ config('app.name') }}:</strong>
                                @if (config('app.address'))
                                    <span>{{ config('app.address') }} &nbsp;|&nbsp;</span>
                                    @endif @if (config('app.phone'))
                                        <span>&#128222;
                                            {{ config('app.phone') }}</span>
                                    @endif
                            </span>
                        </td>
                        <td style="text-align:right; white-space:nowrap;">
                            {{-- <span class="social-box">f</span>
                            <span class="social-box">t</span>
                            <span class="social-box">in</span> --}}
                        </td>
                    </tr>
                </table>
            </div>

        </div><!-- /wrapper -->

    </body>

</html>
