<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>View opportunities at <?=$site_name?></title>
    <style type="text/css">
        body {margin: 0; padding: 0; min-width: 100%!important; font-family: sans-serif;}
        .content {width: 100%; max-width: 600px; background-color: #ffffff;}
        .header {padding: 10px 10px 10px 10px;}
        .innerpadding {padding: 10px 10px 10px 10px;}
        .borderbottom {border-bottom: 1px solid #f2eeed;}
        .subhead {font-size: 12px; color: #ffffff; font-family: sans-serif; letter-spacing: 3px;}
        .bodycopy {font-size: 16px; line-height: 20px; padding-bottom:10px;}
        .button {text-align: center; font-size: 16px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
        .button a {color: #ffffff; text-decoration: none;}
        .footer {padding: 20px 30px 15px 30px; bgcolor:#007bff; background-color:#007bff;}
        .footercopy {font-family: sans-serif; font-size: 16px; color: #ffffff;}
        .footercopy a {color: #ffffff; text-decoration: underline;}
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body style="margin: 0;  min-width: 100%!important; font-size: 16px; line-height: 20px; font-family: sans-serif; background-color:#f6f8f1;"  >
<table  style="max-width:600px; margin:0 auto auto auto" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="margin: 0px;">

                <table  class="content" >
                    <tr>
                        <td  class="header">
                            <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px;">
                                <tr>
                                    <td height="30" border="0" style="text-align:center;">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                            <tr>
                                                <td style="padding: 1px 0 1px 0; text-align:center;">
                                                    <a href="https://www.wrenchboard.com/"><img src="https://www.wrenchboard.com/assets/ext/images/wrenchboard.png" alt="WrenchBoard"></a> <!-- <?=$site_name?> -->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="subhead"
                                                    style="font-size: 12px; color: #ffffff; font-family: sans-serif; letter-spacing: 3px; color:black; padding: 0 0 0 3px;  text-align:center;">
                                                    <?=$promo_title?>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td class="innerpadding borderbottom" style="padding: 10px 10px 10px 10px;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td class="bodycopy"  style="padding-bottom:10px;">
                                        Dear <b><?=$firstname?></b>,
                                    </td>
                                </tr>
                                <tr>
                                    <td class="bodycopy"  style="padding-bottom:10px;">

                                    </td>
                                </tr>

                                <tr>
                                    <td class="bodycopy"  style="padding-bottom:10px;">
                                        &nbsp;&nbsp; <?=$promo_description?>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="bodycopy"  style="padding: 10px 50px 10px 50px;">
                                        <hr size="1" style="color:lightgrey; size=1" />
                                    </td>
                                </tr>
                                <?php
                                $total_price = 0;
                                $pad_l =0;
                                foreach ($task as $item){
                                    $total_price =$total_price + $item["price"];
                                    ?>
                                    <tr>
                                        <td class="bodycopy"  style="font-weight:bold;  font-size 20px; color:black; padding-left: <?=$pad_l?>px;">
                                            <div style="display: flex">
                                                <div style="display: <?php echo ($pad_l>0)? 'block': 'none'; ?>;"><img src="/assets/images/arrow2.png"> </div>
                                                <div style="background-color:#f7f7f8; margin-top: 10px; padding: 5px; border-radius: 10px; text-align: left; width: 100%;  box-shadow: 3px 1px 1px #bbadad;">
                                                    <div><?=$item["title"]?></div>
                                                    <div style="display: flex; width: 100%;">
                                                        <div style="color: #e464e7; font-size: 12px;">&nbsp;&nbsp;<?=$item["description"]?></div>
                                                        <div style="width: 150px; padding-left: 25px; color: darkgreen;"><?=$item["price"]*0.01?> Naira</div>
                                                        <div style="display: <?php echo ($pad_l>0)? 'block': 'none'; ?>; text-align: right; width: 50px;"><img style="width: 30px; height: auto;" src="/assets/images/lock.png"> </div>
                                                    </div>

                                                </div>
                                            </div>

                                        </td>
                                    </tr>
                                    <?php
                                    $pad_l = $pad_l + 25;
                                }

                                ?>
                                <tr>
                                    <td class="bodycopy"  style="font-weight:bold;  font-size 20px; color:black; text-align: right;">
                                        Reward : <?=$total_price*0.01 ?> Naira
                                    </td>
                                </tr>
                                <tr>
                                    <td class="bodycopy"  style="padding:20px; font-weight:bold; text-align:center; font-size 20px; color:darkgreen;">
                                        <div style="background-color:white; margin-top: 10px; padding: 5px; border-radius: 10px;">
                                            <div style="text-align: left">

                                            </div>
                                            <div style="text-align: right; width: 100%;">
                                                <a
                                                    href="<?=$user_server_name?>/PROMO/<?=$promo?>/<?=$promo_owner?>"
                                                    style="background-color: aliceblue;
                                            text-decoration:none;
                                            font-size: 16px;
                                            box-shadow: 10px 5px 5px #bbadad;
                                            color: black; font-weight: bold;
                                            padding: 10px; left:
                                            font-family: Helvetica, Sans-Serif;
                                            border-radius: 10px;" type="submit" >Get Started Now and Unlock<span style="color: #2aa198;"> <?=$total_price*0.01 ?> Naira<span></a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="bodycopy"  style="padding: 10px 50px 10px 50px;">
                                        <hr size="1" style="color:lightgrey; size=1" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="innerpadding borderbottom">
                                        <table width="100%" border="0" >
                                            <tr>
                                                <td style="text-align: center;">
                                                    <a href="https://apps.apple.com/us/app/wrenchboard/id1435718367?ls=1">
                                                        <img style="max-width: 200px; height: auto" src="https://users.wrenchboard.com/assets/images/download/apple.jpg"  alt="Apple" border="0" />
                                                    </a>
                                                </td>
                                                <td style="text-align: center;">
                                                    <a href="https://apps.apple.com/us/app/wrenchboard/id1435718367?ls=1">
                                                        <img style="max-width: 200px; height: auto"  src="https://users.wrenchboard.com/assets/images/download/android.jpg"  alt="Android" border="0" />
                                                    </a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>




                    <tr>
                        <td class="innerpadding bodycopy"  style="padding: 10px 10px 10px 10px;">
                            <b>    <?=$site_name?> Team </b>
                            <br>
                            <?=$server_name?>
                        </td>
                    </tr>
                    <tr>
                        <td class="footer" style="color:#ffffff; padding: 20px 30px 15px 30px; bgcolor:#007bff; background-color:#007bff;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" class="footercopy">
                                        &reg; <?=$site_name?> <?=$yyyy?> <br/>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" style="padding: 20px 0 0 0;">
                                        <table border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                                                    <a href="https://www.facebook.com/wrenchboard/">
                                                        <img src="<?=$server_name?>/assets/images/brands/facebook.png" width="37" height="37" alt="Facebook" border="0" />
                                                    </a>
                                                </td>
                                                <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                                                    <a href="http://www.twitter.com/">
                                                        <img src="<?=$server_name?>/assets/images/brands/twitter.png" width="37" height="37" alt="Twitter" border="0" />
                                                    </a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>



        </td>
    </tr>
</table>

</body>
</html>