<html>
<head>
    <title>Donation Receipt</title>
    <style>
        html,
        body {
            height: 100%;
        }

        /** Define the margins of your page **/
        @page {
            margin-top: 0px;
            margin-left: 0px;
            margin-right: 0px;
        }

        .block {
            width: 50%;
        }

        .row {
            width: 100%;
        }

        body {
            background-color: #FFFBFA;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .p_no_margin {
            margin: 0px;
            line-height: 1.5em;
            font-weight: bold;
        }

        h2,
        h1,
        h3 {
            margin: 0px;
        }

        /*  SECTIONS  */
        .section {
            clear: both;
            padding: 0px;
            margin: 0px;
        }

        /*  COLUMN SETUP  */
        .col {
            display: block;
            float: left;
            /*margin: 1% 0 1% 1.6%;*/
        }

        .col:first-child {
            margin-left: 0;
        }

        /*  GROUPING  */
        .group:before,
        .group:after {
            content: "";
            display: table;
        }

        .group:after {
            clear: both;
        }

        .group {
            zoom: 1;
            /* For IE 6/7 */
        }

        /*  GRID OF THREE  */
        .span_3_of_3 {
            width: 45%;
        }

        .span_2_of_3 {
            width: 45%;
        }

        .span_2_of_2 {
            width: 35%;
        }

        .span_1_of_3 {
            width: 10%;
        }

        .normal_font {
            font-family: sans-serif !important;
            font-size: 11px !important;
            color: #404040 !important;
            line-height: 1.4em !important;
            margin: 0px;
        }

        .vertical-text {
            transform: rotate(90deg);
            transform-origin: left top 0;
        }

        .send_payment_label {
            color: #000000;
            font-weight: 700;
            font-size: 20px;
        }

        .send_payment_form_label {
            font-size: 14px;
            color: #000 !important;
            font-weight: 400;
        }

        .send_payment_form_title {
            font-size: 20px;
            color: #000000 !important;
            ;
            font-weight: 500;
        }

        .final_pay_table {
            table-layout: fixed;
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .negative_text {
            color: #ff3333;
            font-size: 16px;
        }

        .fina_total_amount {
            color: #000;
            font-size: 25px;
            font-weight: bold;
        }

        .po_item_table_th {
            background: #F47B2A;
            color: #ffffff;
            padding: 10px;
            text-align: left;
            font-size: 14px;
            font-weight: normal;
        }

        /* DivTable.com */
        .divTable {
            display: table;
            width: 100%;
            border: 1px solid #edb48e;
        }

        .divTableRow {
            display: table-row;
        }

        .divTableHeading {
            background-color: #EEE;
            display: table-header-group;
        }

        .divTableCell {
            height: 15px;
            display: table-cell;
            padding: 8px 10px;
            font-size: 13px;
        }

        .divTableHead {
            background: #F47B2A;
            color: white;
            display: table-cell;
            padding: 10px 10px;
            font-size: 14px;
        }

        .divTableHeading {
            background-color: #EEE;
            display: table-header-group;
            font-weight: bold;
        }

        .divTableFoot {
            background-color: #EEE;
            display: table-footer-group;
            font-weight: bold;
        }

        .divTableBody {
            display: table-row-group;
        }

        .divLastRow {
            background: #F0F0F0;
        }

        .divAmountField {
            text-align: right;
        }

        .divLightRed {
            background: #FFFBFA;
        }

        .divWhite {
            background: #FFFFFF;
        }

        .divBlackFont {
            color: #000000;
            font-weight: 700
        }

        .divGreyFont {
            color: #9ca8b0;
        }

        table {
            border-collapse: collapse;
        }

        th,
        td {
            padding: 8px 16px;
        }

        th {
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <!-- Define header and footer blocks before your content -->
    <header>

    </header>
    <!-- Wrap the content of your PDF inside a main tag -->
    <main style="z-index: 9999;padding: 20px">
        <table style="width: 100%;border: 0px;background-color: #FFFBFA">
            <tr style="border-bottom: 2px solid #edb48e">
                <td style="padding:8px 0;">
                    <table style="width: 100%;border: 0px;">
                        <tr>
                            <td style="padding: 8px 0px;">
                                <img width="260" src="<?php echo isset($logo) ? $logo : ""; ?>">
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 8px 0px;"><?php echo isset($company_address) ? $company_address : "";?></td>
                        </tr>
                        <tr>
                            <td style="padding: 8px 0px;"><?php echo dt_translate('reg_no'); ?> #: <?php echo isset($trust_registration_no) ? $trust_registration_no : "";?></td>
                        </tr>
                    </table>
                </td>
                <td style="padding: 8px 0;vertical-align: top;">
                    <table style="width: 65%;border: 0px;margin-left: auto;">
                        <tr>
                            <td style="font-size: 28px; font-weight: 700; text-align: right;padding: 0;color: #F47B2A"><?php echo dt_translate('donation_receipt'); ?></td>
                        </tr>
                        <tr>
                            <td style="padding: 8px 0px;">
                                <table style="width: 100%;border: 1px solid #edb48e;">
                                    <tr>
                                        <td style="padding-top: 10px;border: 1px solid #edb48e;text-align: center;font-size: 12px;">
                                            <?php echo dt_translate('date'); ?></td>
                                        <td style="padding-top: 10px;border: 1px solid #edb48e;text-align: center;font-size: 12px;">
                                            <?php echo dt_translate('receipt_no'); ?> #</td>
                                    </tr>
                                    <tr>
                                        <td style="border: 1px solid #edb48e;text-align: center;font-size: 12px;">
                                            <?php echo date('m/d/Y'); ?>
                                        </td>
                                        <td style="border: 1px solid #edb48e;text-align: center;font-size: 12px;">
                                            <?php echo isset($donation['id'])?$donation['id']:""; ?>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        <table style="width: 100%;border: 0px;background-color: #FFFBFA;margin-top: 100px;padding: 10px;">
            <tr>
                <td style="padding:8px 0;">
                    <?php echo dt_translate('to_whom_it_may_concern'); ?>,
                </td>
            </tr>
            <tr>
                <td style="padding:8px 0;">
                    <?php echo dt_translate('name'); ?>: <?php echo isset($donation['first_name'])?$donation['first_name']." ".$donation['last_name']:""; ?>
                </td>
            </tr>
            <tr>
                <td style="padding:8px 0;">
                    <?php echo dt_translate('phone'); ?>: <?php echo isset($donation['phone'])?$donation['phone']:""; ?>
                </td>
            </tr>
            <tr>
                <td style="padding:8px 0;">
                    <?php echo dt_translate('email'); ?>: <?php echo isset($donation['email'])?$donation['email']:""; ?>
                </td>
            </tr>
            <tr>
                <td style="padding:8px 0;">
                    <?php echo dt_translate('city'); ?>: <?php echo isset($donation['city'])?$donation['city']:""; ?>
                </td>
            </tr>
            <tr>
                <td style="padding:8px 0;">
                    <?php echo dt_translate('thanks_for_donation_invoice'); ?> <?php echo dt_price_format($donation['amount']); ?>
                </td>
            </tr>
            <tr>
                <td style="padding:8px 0;">
                    <?php echo dt_get_CompanyName(); ?> <?php echo dt_translate('registered_ngo'); ?>
                </td>
            </tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr>
                <td style="padding:8px 0;">
                    <?php echo dt_translate('sincerely'); ?>
                </td>
            </tr>
            <tr>
                <td style="padding:8px 0;">
                    <?php echo dt_get_CompanyName(); ?>
                </td>
            </tr>
        </table>
    </main>
</body>

</html>