<?php 
require (PAGE_CONTENT.$PageContent);

$strOverviewReferenceNumber="";

if(isset($_POST["strReferenceNumber"]))
{
  $strOverviewReferenceNumber = $_POST["strReferenceNumber"];
}
?>
<div id="<?php echo $pageID;?>" class="page-wrapper row">
  <div class="col s12 investment-calculator-intro">
    <div class="content-wrap">
      <div class="calc-wrap">
      <h1 class="center-align alrightsansmedium intro-head-type"><?php echo $ic_headHero;?></h1>
      <p class="center-align alrightsansregular intro-txt-type"><?php echo $ic_txtHero;?></p>

      <?php require(SAVING_CALCULATOR.'/savings-calculator-form.php');?>
    </div>
  </div><!-- content-wrap -->
  </div><!-- investment-calculator-intro -->

  <div class="investment-continer-all hide">

    <div class="col s12 investment-calculator-container">
        <div class="content-wrap">
      <div  class="investment-calculator-illustration">
        <h2 class="center-align alrightsansmedium intro-head-type"><?php echo $ic_headIllu; ?></h2>
        <p class="center-align alrightsansregular intro-txt-type investment-illustration-graph-t"><?php echo $ic_txtIllu; ?></p>

        <div class="investment-illustration-circle">
            <p class="alrightsansmedium intro-head-type circle-init-amount numerical_numbers"></p>
        </div>
      </div><!-- investment-calculator-illustration -->
    </div><!-- content-wrap -->
    </div>

  <div class="col s12 investment-illustration-graph">
    <div class="content-wrap">
      <p class="center-align alrightsansregular intro-txt-type">Over a period of 10 years your investment in the BullionGold Facility would have outperformed cash in the bank by </br> A difference of <span class="graph-diff"></span></p>

      <div class="investment-illustration-graph-container">
        <p class="alrightsansmedium body-txt-type"><span class="gold-c">BullionGold Facility</span></br><span class="cash-c">Cash In Bank</span></p>
      <div id="chart_div_hidden"></div>
      <div id="chart_div"></div>
      <div id="savings-illustration-graph"></div>
      <div class="col s12 investment-comparison-vs">
        <div class="col l6 s12 gold-c gold-container center-align">
          <p class="col s12 alrightsansregular body-txt-type gold-m">BullionGold Facility value today</p>
          <h4 class="col s12 alrightsansmedium gold-savings-amount-c gold-m"></h4>
        </div>
        <div class="col l6 s12 cash-c cash-c-c center-align">
          <p class="col s12 alrightsansregular body-txt-type gold-m">Cash in the bank value today</p>
          <h4 class="col s12 alrightsansmedium cash-savings-amount-c gold-m"></h4>
        </div>
      </div>
    </div><!-- investment-illustration-graph-container -->
    </div>
  </div>

  <div class="investment-calculator-table">
    <div class="content-wrap">
    <div class="invest-table col s12">
      <table class="alrightsansregular body-txt-type calc-table center-align" style="width:100%">
        <tr colspan="3">
          <th>Historical comparison of performance (10 years)</th>
        </tr>
        <tr class="table-heading">
          <th style="width:25%;">Year</th>
          <th style="width:25%;">BullionGold Facility</th>
          <th style="width:25%;">Cash In Bank</th>
          <th style="width:25%;">Difference</th>
        </tr>
        <tr>
          <td style="width:25%;" class="y0"></td>
          <td style="width:25%;" class="f0"></td>
          <td style="width:25%;" class="c0"></td>
          <td style="width:25%;" class="d0"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:25%;" class="y1"></td>
          <td style="width:25%;" class="f1"></td>
          <td style="width:25%;" class="c1"></td>
          <td style="width:25%;" class="d1"></td>
        </tr>
        <tr>
          <td style="width:25%;" class="y2"></td>
          <td style="width:25%;" class="f2"></td>
          <td style="width:25%;" class="c2"></td>
          <td style="width:25%;" class="d2"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:25%;" class="y3"></td>
          <td style="width:25%;" class="f3"></td>
          <td style="width:25%;" class="c3"></td>
          <td style="width:25%;" class="d3"></td>
        </tr>
        <tr>
          <td style="width:25%;" class="y4"></td>
          <td style="width:25%;" class="f4"></td>
          <td style="width:25%;" class="c4"></td>
          <td style="width:25%;" class="d4"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:25%;" class="y5"></td>
          <td style="width:25%;" class="f5"></td>
          <td style="width:25%;" class="c5"></td>
          <td style="width:25%;" class="d5"></td>
        </tr>
        <tr>
          <td style="width:25%;" class="y6"></td>
          <td style="width:25%;" class="f6"></td>
          <td style="width:25%;" class="c6"></td>
          <td style="width:25%;" class="d6"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:25%;" class="y7"></td>
          <td style="width:25%;" class="f7"></td>
          <td style="width:25%;" class="c7"></td>
          <td style="width:25%;" class="d7"></td>
        </tr>
        <tr>
          <td style="width:25%;" class="y8"></td>
          <td style="width:25%;" class="f8"></td>
          <td style="width:25%;" class="c8"></td>
          <td style="width:25%;" class="d8"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:25%;" class="y9"></td>
          <td style="width:25%;" class="f9"></td>
          <td style="width:25%;" class="c9"></td>
          <td style="width:25%;" class="d9"></td>
        </tr>
        <tr>
          <td style="width:25%;" class="y10"></td>
          <td style="width:25%;" class="f10"></td>
          <td style="width:25%;" class="c10"></td>
          <td style="width:25%;" class="d10"></td>
        </tr>
      </table>
    </div>
  </div><!-- content-wrap -->
  </div>

    <div class="col s12 investment-details-section">
      <div class="content-wrap">
        <div class="col s12">
        <section class="col s12 l6 investment-details-section-left">
          <h3 class="alrightsansmedium body-head-type"><?php echo $ic_id_head?></h3>
            <ul>
              <li><p class="alrightsansregular body-txt-type"><?php echo $ic_id_txt_5?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php echo $ic_id_txt_1?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php echo $ic_id_txt_2?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php echo $ic_id_txt_3?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php echo $ic_id_txt_4?></p></li>
              <!--
              <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_id_txt_5?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_id_txt_6?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_id_txt_7?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_id_txt_8?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_id_txt_9?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_id_txt_10?></p></li>
              <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_id_txt_11?></p></li>
              -->
            </ul>
        </section>
        <section class="col s12 l6 investment-details-section-right">
          <h3 class="alrightsansmedium body-head-type"><?php echo $ic_krp_head?></h3>
          <ul>
            <li><p class="alrightsansregular body-txt-type"><?php echo $ic_krp_txt_1?></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php echo $ic_krp_txt_2?></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php echo $ic_krp_txt_3?></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php echo $ic_krp_txt_4?></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php echo $ic_krp_txt_5?></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php echo $ic_krp_txt_6?></p></li>
          </ul>
        </section>
        </div>
        <div class="col s12 investment-details-section center-align">
          <p class="alrightsansregular body-txt-type disclaimer-sc">Krugerrands are purchased at 3% over the gold price.</br>
          An annual fee of 1.5% is payable on all gold holdings and is inclusive of vaulting, insurance and administration costs.</p>

        </div>
<!--
        <div class="col s12">
        <section class="col s12 l6 investment-details-section-left">


          <h3 class="alrightsansmedium body-head-type"><?php //echo $ic_boi_head?></h3>
          <ul class="benefits-of-investment">
            <li><p class="alrightsansregular body-txt-type"><?php// echo $ic_boi_txt_1?><span class="right"><?php// echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_home_tick.svg"); ?></span></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php// echo $ic_boi_txt_2?><span class="right"><?php// echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_home_tick.svg"); ?></span></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php// echo $ic_boi_txt_3?><span class="right"><?php// echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_home_tick.svg"); ?></span></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php// echo $ic_boi_txt_4?><span class="right"><?php// echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_home_tick.svg"); ?></span></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php// echo $ic_boi_txt_5?><span class="right"><?php// echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_home_tick.svg"); ?></span></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php// echo $ic_boi_txt_6?><span class="right"><?php// echo file_get_contents(TEMPLATES_ASSETS."/svgs/sab_home_tick.svg"); ?></span></p></li>
          </ul>
        </section>
        <section class="col s12 l6 investment-details-section-right">
          <h3 class="alrightsansmedium body-head-type"><?php //echo $ic_af_head?></h3>
          <ul>
            <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_af_txt_1?></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_af_txt_2?></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_af_txt_3?></p></li>
            <li><p class="alrightsansregular body-txt-type"><?php //echo $ic_af_txt_4?></p></li>
          </ul>
        </section>
        </div>
 -->
      </div><!-- content-wrap -->
    </div><!-- investment-details-section -->
    <div class="col s12">
        <div class="content-wrap">
          <?php 
          echo "<input id='strReferenceNumber' type='hidden' value='' />";
          echo "<input id='strOverviewReferenceNumber' type='hidden' value='$strOverviewReferenceNumber' />";
          ?>
          <p class="alrightsansregular body-txt-type right-align investment-send-link">Send Investment illustration per <a id="email-savings-pdf" herf="#">Email</a> or <a id="print-save-pdf" href="#">Download Pdf</a></p>
        </div><!-- content-wrap -->
    </div>
    <div class="start-investing col s12">
      <p class="center-align alrightsansmedium body-head-type">Download Our Application Form</p>
      <a class="link-btn btn-flat btn-center alrightsansregular" target="_blank" href="http://41.185.64.177/~sabullionco//assets/templates/downloads/SA Bullion Facility Application.pdf" download><span class="text-hover">Download</span><i class="material-icons right arrow-hover"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/btn-arrow.svg"); ?></i></a>
    </div>
  </div><!-- investment-continer-all -->

  <div id="savingsPdfdiv" class="col s12"></div>
</div><!-- page wrapper -->
