<?php 
require (PAGE_CONTENT.$PageContent);

$strOverviewReferenceNumber="";

if(isset($_POST["strReferenceNumber"]))
{
  $strOverviewReferenceNumber = $_POST["strReferenceNumber"];
}
?>

<style type="text/css">
  .benefits-of-investment li{
    min-height: 0 !important;
  }
</style>

<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(INVEST_CALCULATOR.'/investment-minted-bar-calculator-form.php');?>
    </div>
  </div><!-- content-wrap -->
  </div><!-- investment-calculator-intro -->

  <div id="investment-continer-all" class="investment-continer-all hide col s12">
  <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 investment-illustration-graph-t"><?php echo $ic_txtGraph?></p>
      <div class="investment-illustration-graph-container">
      <p class="alrightsansmedium body-txt-type"><span class="gold-c">Gold Investment</span></br><span class="cash-c">Cash In Bank</span></p>
      <div id="chart_div_hidden"></div>
      <div id="chart_div"></div>
      <div id="investment-illustration-graph">
      </div>
    </div><!-- investment-illustration-graph-container -->
    <div class="col s12 investment-comparison-vs">
      <div class="col l6 s12 gold-c gold-container">
        <p class="alrightsansregular body-txt-type center-align">Gold investment value today</p>
        <h4 class="alrightsansmedium center-align gold-val-returned"></h4>
      </div>
      <div class="col l6 s12 cash-c">
        <p class="alrightsansregular body-txt-type center-align">Cash in the bank value today</p>
        <h4 class="alrightsansmedium center-align cash-val-returned"></h4>
      </div>
    </div>
    </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 Gold Performance (10 years)</th>
        </tr>
        <tr class="table-heading">
          <th style="width:33.33%;">Year</th>
          <th style="width:43.33%;">Amount</th>
          <th style="width:23.33%;">Percentage</th>
        </tr>
        <tr>
          <td style="width:33.33%;" class="y0"></td>
          <td style="width:43.33%;" class="a0 numerical_numbers"></td>
          <td style="width:23.33%;" class="results"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:33.33%;" class="y1"></td>
          <td style="width:43.33%;" class="a1 numerical_numbers"></td>
          <td style="width:23.33%;" class="p1"></td>
        </tr>
        <tr>
          <td style="width:33.33%;" class="y2"></td>
          <td style="width:43.33%;" class="a2 numerical_numbers"></td>
          <td style="width:23.33%;" class="p2"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:33.33%;" class="y3"></td>
          <td style="width:43.33%;" class="a3 numerical_numbers"></td>
          <td style="width:23.33%;" class="p3"></td>
        </tr>
        <tr>
          <td style="width:33.33%;" class="y4"></td>
          <td style="width:43.33%;" class="a4 numerical_numbers"></td>
          <td style="width:23.33%;" class="p4"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:33.33%;" class="y5"></td>
          <td style="width:43.33%;" class="a5 numerical_numbers"></td>
          <td style="width:23.33%;" class="p5"></td>
        </tr>
        <tr>
          <td style="width:33.33%;" class="y6"></td>
          <td style="width:43.33%;" class="a6 numerical_numbers"></td>
          <td style="width:23.33%;" class="p6"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:33.33%;" class="y7"></td>
          <td style="width:43.33%;" class="a7 numerical_numbers"></td>
          <td style="width:23.33%;" class="p7"></td>
        </tr>
        <tr>
          <td style="width:33.33%;" class="y8"></td>
          <td style="width:43.33%;" class="a8 numerical_numbers"></td>
          <td style="width:23.33%;" class="p8"></td>
        </tr>
        <tr class="tbl-row-purple">
          <td style="width:33.33%;" class="y9"></td>
          <td style="width:43.33%;" class="a9 numerical_numbers"></td>
          <td style="width:23.33%;" class="p9"></td>
        </tr>
        <tr>
          <td style="width:33.33%;" class="y10"></td>
          <td style="width:43.33%;" class="a10 numerical_numbers"></td>
          <td style="width:23.33%;" class="p10"></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_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>
            </ul>
        </section>
        <section class="col s12 l6 investment-details-section-right">
          <h3 class="alrightsansmedium body-head-type"><?php echo $ic_boi_head?></h3>
          <ul class="benefits-of-investment">
            <li><p class="alrightsansregular body-txt-type col l10"><?php echo $ic_boi_txt_1?></p></li>
            <li><p class="alrightsansregular body-txt-type col l10"><?php echo $ic_boi_txt_2?></p></li>
            <li><p class="alrightsansregular body-txt-type col l10"><?php echo $ic_boi_txt_3?></p></li>
            <li><p class="alrightsansregular body-txt-type col l10"><?php echo $ic_boi_txt_4?></p></li>
            <!-- <li><p class="alrightsansregular body-txt-type col l10"><?php //echo $ic_boi_txt_5?></p></li> -->
          </ul>
        </section>
        </div>

        <div class="col s12">
        <section class="col s12 l6 investment-details-section-left">
          <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_4?></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>
          </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-pdf" herf="#">Email</a> or <a id="print-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="investmentPdfdiv" class="col s12"></div>
</div><!-- page-wrapper -->
