<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Donation Receipt</title>
</head>
<style>
    html,
    body {
        height: 100%;
    }

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

    .pb-20 {
        padding-bottom: 20px !important;
    }

    .page-1 {
        padding: 20px 40px 0px;
    }

    body {
        background-color: #FFF;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .sans-serif {
        /* font-family: 'Lato', sans-serif !important; */
        font-family: sans-serif !important;
    }

    /* DivTable.com */
    .divTable {
        display: table;
        width: 100%;
    }

    .divTableRow {
        display: table-row;
    }

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

    .divTableCell,
    .divTableHead {
        display: table-cell;
        padding: 3px 20px;
    }

    .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;
    }

    .bd {
        border: 1px solid #000000 !important;
    }

    /* border without top border */
    .bd-wt {
        border: 1px solid #000000 !important;
        border-top: none !important;
    }

    /* border without top and right */
    .bd-wtr {
        border: 1px solid #000000 !important;
        border-top: none !important;
        border-right: none !important;
    }

    /* remove padding */
    .pl-0 {
        padding-left: 0px !important;
    }

    .pr-0 {
        padding-right: 0px !important;
    }

    .text-right {
        text-align: right;
    }

    .p-0 {
        padding: 2px 0px 0px 3px !important;
    }

    .mr-20 {
        margin-right: 20px;
    }

    .arial {
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .mt-20 {
        margin-top: 20px;
    }

    .w-30 {
        width: 17%;
    }

    .w-20 {
        width: 13%;
    }

    .w-70 {
        width: 70%;
    }
</style>

<body>
    <div class="page-1">
        <table>
            <tr>
                <td>
                    <h1 style="color:gray;font-size:40px ;font-weight:50;" class="arial">DONATION RECEIPT</h1>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td style="width: 50%;">
                    <h2 style="color:#000000d3;margin-top: 0px;"><?php echo dt_get_CompanyName(); ?></h2>
                </td>
            </tr>
        </table>

        <div class="divTable mt-20">
            <div class="divTableBody">
                <div class="divTableRow">

                    <div class="divTableCell pl-0" style="width:40%;">
                        <span style="width: 100%;">
                            <?php echo isset($company_address) ? $company_address : "";?>
                        </span>
                        <br/>
                        <span style="width: 100%;">
                            Reg #: <?php echo isset($trust_registration_no) ? $trust_registration_no : "";?>
                        </span>
                    </div>

                    <div class="divTableCell pl-0" style="width:30%;">
                        <div class="divTable">

                            <div class="divTableRow">
                                <div class="divTableCell">
                                    <span>
                                        <b>DATE:</b>
                                    </span>
                                </div>
                                <div class="divTableCell text-right pr-0">
                                    <?php echo get_formated_date($donation['created_on'],'N'); ?>
                                </div>
                            </div>

                            <div class="divTableRow" s>
                                <div class="divTableCell">
                                    <span>
                                        <b>RECEIPT #</b>
                                    </span>
                                </div>
                                <div class="divTableCell text-right pr-0">
                                    <?php echo isset($donation['id'])?$donation['id']:""; ?>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="divTable mt-20">
            <div class="divTableBody">
                <div class="divTableRow">

                    <div class="divTableCell pl-0" style="width:50%;">
                        <b>Donor:</b>
                    </div>

                    <div class="divTableCell" style="width:50%;">

                    </div>
                </div>
            </div>
        </div>

        <div class="divTable" style="margin-top: 10px;">
            <div class="divTableBody">
                <div class="divTableRow">

                    <div class="divTableCell pl-0" style="width:50%;">
                        Name: <?php echo isset($donation['first_name'])?$donation['first_name']." ".$donation['last_name']:""; ?>
                        <br>
                        Phone: <?php echo isset($donation['phone'])?$donation['phone']:""; ?>
                        <br/>
                        Email: <?php echo isset($donation['email'])?$donation['email']:""; ?>
                        <br/>
                        City: <?php echo isset($donation['city'])?$donation['city']:""; ?>
                    </div>

                </div>
            </div>
        </div>


        <div class="divTable mt-20">
            <div class="divTableBody">
                <div class="divTableRow">
                    <div class="divTableCell bd p-0 w-70" style="background-color: rgba(218, 219, 219, 0.233) !important;border-right:none !important;padding-bottom:15px !important;">
                        <b>Category</b>
                    </div>

                    <div class="divTableCell bd p-0" style="background-color: rgba(218, 219, 219, 0.233) !important;border-right:none !important;padding-bottom:15px !important;width: 22%">
                        <b>DATE</b>
                    </div>


                    <div class="divTableCell bd p-0 w-30" style="background-color: rgb(218, 219, 219, 0.089) !important;">
                        <b>AMOUNT</b>
                    </div>
                </div>
                <div class="divTableRow">
                    <div class="divTableCell w-70 bd-wtr  p-0" style="padding-bottom:15px !important;">
                        <div class="divTable">
                            <div class="divTableBody">
                                <div class="divTableRow">
                                    <div class="divTableCell p-0 w-70">
                                        <?php echo ($donation['category_title']); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="divTableCell p-0 w-20 bd-wtr" style="padding-bottom:15px !important;">
                        <?php echo get_formated_date($donation['created_on'],'N'); ?>
                    </div>
                    <div class="divTableCell w-30 bd-wt p-0">
                        <?php echo dt_price_format($donation['amount']); ?>
                    </div>
                </div>

                <div class="divTableRow">
                    <div class="divTableCell w-70 bd-wtr  p-0" style="padding-bottom:35px !important;">
                        <div class="divTable">
                            <div class="divTableBody">
                                <div class="divTableRow">
                                    <div class="divTableCell p-0 w-70"></div>
                                    <div class="divTableCell p-0 w-30"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="divTableCell w-20 bd-wtr p-0"></div>
                    <div class="divTableCell w-30 bd-wt p-0">
                        <span class="mr-20">

                        </span>
                        <span>

                        </span>
                    </div>
                </div>

                <div class="divTableRow">
                    <div class="divTableCell w-70 p-0"></div>
                    <div class="divTableCell w-20 bd-wtr p-0">Total</div>
                    <div class="divTableCell w-30 bd-wt p-0" style="background-color: rgba(218, 219, 219, 0.233) !important;padding-bottom:15px !important;">
                        <span><?php echo dt_price_format($donation['amount']); ?></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="" style="margin-top:40px;">
            <p style="margin-bottom: 0px;margin-top: 5px;"><?php echo dt_get_CompanyName(); ?> is a registered 501(c)3 non-profit organization. Therefore, your
                donation is 100% tax-deductible.</p>
            <p style="margin-bottom: 0px;margin-top: 5px;">Please use the EIN number above to claim your tax deduction.</p>
            <p><b>THANK YOU FOR YOUR DONATION!</b></p>
        </div>


        <div class="" style="margin-top:40px;">
            <p style="margin-bottom: 0px;margin-top: 5px;">Sincerely</p>
            <p style="margin-bottom: 0px;margin-top: 5px;"><?php echo dt_get_CompanyName(); ?></p>
        </div>
    </div>
</body>
</html>