<!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;}
        .header {padding: 10px 10px 10px 10px;}
        .innerpadding {padding: 10px 10px 10px 10px;}
        .signup_random{ font-size: 44px; padding:10px; margin:10px;}
        .line-band {height 20px;}
        .warning{color:lightred; font-weight: bolder; padding 10px;}
        .continue-web{background-color:aliceblue; padding:10px;}
        .cent-ver{text-align:center; }
        .borderbottom {border-bottom: 1px solid #f2eeed;}
        .subhead {font-size: 12px; color: #ffffff; font-family: sans-serif; letter-spacing: 3px;}
        .h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
        .h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
        .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; padding: 10px; min-width: 100%!important; font-size: 16px; line-height: 20px; font-family: sans-serif; background-color:#f6f8f1;"  >
<table  style="max-width:640px; margin:0 auto auto auto" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table bgcolor="#ffffff" class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                <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;">
                                    &nbsp;&nbsp; <?=$promo_title?>
                                </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;
                              foreach ($task as $item){
                                  $total_price =$total_price + $item["price"];
                                  ?>
                                  <tr>
                                      <td class="bodycopy"  style="padding:5px; font-weight:bold;  font-size 20px; color:black;">
                                          <div style="background-color:#f7f7f8; margin-top: 10px; padding: 5px; border-radius: 10px; text-align: left;">
                                          <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>

                                          </div>
                                      </td>
                                  </tr>
                            <?php
                            }

                            ?>
                            <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: #007bff;
                                            text-decoration:none;
                                            font-size: 14px;
                                            color: white; font-weight: bold;
                                            padding: 10px; left:
                                            font-family: Helvetica, Sans-Serif;
                                            border-radius: 10px;" type="submit" >Get Started on <?=$total_price*0.01 ?> Naira Tasks</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>
                                                <a href="https://apps.apple.com/us/app/wrenchboard/id1435718367?ls=1">
                                                    <img src=https://www.wrenchboard.com/assets/images/download-apple.jpg"  alt="Apple" border="0" />
                                                </a>
                                            </td>
                                            <td>
                                                <a href="https://apps.apple.com/us/app/wrenchboard/id1435718367?ls=1">
                                                    <img src="https://www.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;">
                        <?=$site_name?> Team
                        <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>