<?php
/**
 * Created by PhpStorm.
 * User: Gael Wamba Musikingala
 * Date: 2016/02/29
 * Time: 8:33 AM
 */

//20190510 - Included the layout in wizard steps. - Gael
//20201029 - Accessing cookie for URL always return zero, simply use $_COOKIE
$stepData = json_decode($_COOKIE["client/details/sa-natural"]);


//print_r($stepData);
if(!isset($stepData)){
    header("Location: $SiteUrl/login.php?client/details/sa-natural");
}

$img = file_get_contents(TEMPLATES_ASSETS.'/svgs/sab_home_tick.svg');


// $WizardContent = "
//     <h1 class='text-center'>Review and Submit</h1>
//     <h5 class='text-center'>Please check the details you provided and submit your Details <br> to become a Client </h5>

//     <div class='review padding-top35px collapsible-header' id='companyInfo'> Investor Information <span class='icon-arrow-down reviewIcon'></span></div>
//         <div class='results hidden' id='companyInfoResults'>
//             ";
//             // require (TEMPLATES.'/login/client/sa-natural/basic.php');
//             // require (TEMPLATES.'/login/client/sa-natural/contact.php');
// $WizardContent .= "
//         </div> ";
$WizardContent = "
    <h1 class='text-left hFont'>Review and Submit</h1>
    <h5 class='text-left'>Please check the details you provided and submit your Details to become a Client. To edit your details,<br> please click on the relevant sub-section heading. </h5>

    <div class='collapsible-header review padding-top10px' id='companyInfo'><label style='color: #fff; margin-left: 30px;'> Investor Information <span class='icon-arrow-down reviewIcon' style='margin-left: 440px;'> </span></label></div>
    <div class='collapsible-body  z-depth-0 results hidden' id='companyInfoResults' style='padding-left:13px;padding-right:13px;'>
        <div class='reviewSection'>
               <h6 class='SectionHeader'>
                  <a href='login.php?client/details/sa-natural' style='font-size:15px;'>Personal Details</a>
               </h6>
               <table class='SectionList' width='100%' style='border-collapse:separate;border:solid #f0eded 1px;border-radius:19px;-moz-border-radius:19px;'>
                  <colgroup><col width='250px'>
                  <col width=''>
                  </colgroup><tbody><tr>
                     <td style='padding-left:16px;border-top-left-radius:19px;'>Title :</td>
                     <td style='border-top-right-radius:19px;' id='user_title'> </td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Name :</td>
                     <td id='user_name'></td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Last Name :</td>
                     <td id='user_last_name'></td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Email Address :</td>
                     <td id='user_email'></td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>ID Number :</td>
                     <td id='user_id_no'></td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Date of Birth :</td>
                     <td id='user_dateofbirth'></td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Occupation :</td>
                     <td id='user_occupation'></td>
                  </tr>
               </tbody></table>
        </div>
        <div class='reviewSection'>
               <h6 class='SectionHeader'>
                  <a href='login.php?client/details/sa-natural/contact' style='font-size:15px;'>Contact Information</a>
                  
               </h6>
               <table class='SectionList' width='100%' style='border-collapse:separate;border:solid #f0eded 1px;border-radius:19px;-moz-border-radius:19px;'>
                  <colgroup><col width='250px'>
                  <col width=''>
                  </colgroup><tbody><tr>
                     <td style='padding-left:16px;border-top-left-radius:19px;'>Physical Address Line 1 :</td>
                     <td style='border-top-right-radius:19px;' id='user_address1'> </td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Physical Address Line 2:</td>
                     <td id='user_address2'> </td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Suburb/City :</td>
                     <td id='user_city'></td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Postal Code :</td>
                     <td id='user_postal_code'></td>
                  </tr>
                  <tr class='residential_address' >
                     <td style='padding-left:16px;'>Residential Address Line 1 :</td>
                     <td id='user_residential_address1'></td>
                  </tr>
                  <tr class='residential_address' >
                     <td style='padding-left:16px;'>Residential Address Line 2 :</td>
                     <td id='user_residential_address2'></td>
                  </tr>
                  <tr class='residential_address' >
                     <td style='padding-left:16px;'>Suburb/City :</td>
                     <td id='user_residential_suburb'></td>
                  </tr>
                  <tr class='residential_address' >
                     <td style='padding-left:16px;'>Postal Code :</td>
                     <td id='user_residential_code'></td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Telephone Work :</td>
                     <td id='user_work_tel'></td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Telephone Home :</td>
                     <td id='user_home_tel'></td>
                  </tr>
                  <tr>
                     <td style='padding-left:16px;'>Telephone Mobile :</td>
                     <td id='user_mobile_tel'></td>
                  </tr>
               </tbody></table>
        </div>
        <div class='reviewSection'>
               <h6 class='SectionHeader'>
                  <a href='login.php?client/details/sa-natural/product' style='font-size:15px;'>Product Selection</a>
               </h6>
               <table class='SectionList' width='100%' style='border-collapse:separate;border:solid #f0eded 1px;border-radius:19px;-moz-border-radius:19px;'>
                  <colgroup><col width='250px'>
                  <col width=''>
                  </colgroup><tbody><tr>
                     <td style='padding-left:16px;border-top-left-radius:19px;'>Selected Product :</td>
                     <td style='border-top-right-radius:19px;' id='user_product'> </td>
                  </tr>
               </tbody></table>
        </div>
    </div>
            ";


// $WizardContent .= "

//         <div class='review padding-top35px' id='financialInfo'> Financial Information <span class='icon-arrow-down reviewIcon'></span></div>
//         <div class='results hidden' id='financialInfoResults'>
//         </div>
//             ";

$WizardContent .= "
        <div class='collapsible-header review padding-top10px' id='financialInfo'><label style='color: #fff; margin-left: 30px;'> Financial Information <span class='icon-arrow-down reviewIcon' style='margin-left: 433px;'></span></label></div>
        <div class='collapsible-body  z-depth-0 results hidden' id='financialInfoResults' style='padding-left:13px;padding-right:13px;'>
            <div class='reviewSection'>
                   <h6 class='SectionHeader'>
                      <a href='login.php?client/details/sa-natural/contribution' style='font-size:15px;'>Contribution</a>
                   </h6>
                   <table class='SectionList' width='100%' style='border-collapse:separate;border:solid #f0eded 1px;border-radius:19px;-moz-border-radius:19px;'>
                      <colgroup><col width='250px'>
                      <col width=''>
                      </colgroup><tbody><tr>
                         <td style='padding-left:16px;border-top-left-radius:19px;'>Once-off Contribution :</td>
                         <td style='border-top-right-radius:19px;' id='once_off_option' > </td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Amount :</td>
                         <td id='contribution_amount' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>SA Bullion initial fee :</td>
                         <td id='onceoff_initial_fee' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>VAT :</td>
                         <td id='onceoff_vat' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Source of funds :</td>
                         <td id='source_of_funds' ></td>
                      </tr>
                      <tr class='monthly_debit'>
                         <td style='padding-left:16px;'>Payment Method :</td>
                         <td id='payment_method' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Debit Order :</td>
                         <td id='monthly_debit_option' > </td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Amount :</td>
                         <td id='debit_amount' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>SA Bullion initial fee :</td>
                         <td id='debit_initial_fee' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>VAT :</td>
                         <td id='debit_vat' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Source of funds :</td>
                         <td id='debit_source_of_funds' ></td>
                      </tr>
                      <tr class='monthly_debit'>
                         <td style='padding-left:16px;'>Payment Collection Day :</td>
                         <td id='debit_payment_day' ></td>
                      </tr>
                      <tr class='monthly_debit'>
                         <td style='padding-left:16px;'>Payment Start Month :</td>
                         <td id='debit_payment_month' ></td>
                      </tr>
                      <tr class='monthly_debit'>
                         <td style='padding-left:16px;'>Annual increase in contribution :</td>
                         <td id='debit_annual_increase' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Number of Krugerrands acquired :</td>
                         <td id='onceoff_kr_acquired' ></td>
                      </tr>
                   </tbody></table>
            </div>
            <div class='reviewSection'>
                   <h6 class='SectionHeader'>
                      <a href='login.php?client/details/sa-natural/payment' style='font-size:15px;'>Payment of annual fee</a>
                   </h6>
                   <table class='SectionList' width='100%' style='border-collapse:separate;border:solid #f0eded 1px;border-radius:19px;-moz-border-radius:19px;'>
                      <colgroup><col width='250px'>
                      <col width=''>
                      </colgroup><tbody><tr>
                         <td style='padding-left:16px;border-top-left-radius:19px;'>Annual fee payment option:</td>
                         <td style='border-top-right-radius:19px;' id='annual_fee_option'> </td>
                      </tr>
                   </tbody></table>
            </div>
          <div class='reviewSection'>
                   <h6 class='SectionHeader'>
                      <a href='login.php?client/details/sa-natural/tax' style='font-size:15px;'>Tax Information</a>
                   </h6>
                   <table class='SectionList' width='100%' style='border-collapse:separate;border:solid #f0eded 1px;border-radius:19px;-moz-border-radius:19px;'>
                      <colgroup><col width='250px'>
                      <col width=''>
                      </colgroup><tbody><tr>
                         <td style='padding-left:16px;border-top-left-radius:19px;'>South African Tax Information:</td>
                         <td style='border-top-right-radius:19px;' id='saTax' > </td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Income Tax Registration Number:</td>
                         <td id='incomeTaxRegNumber' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Foreign Tax Information:</td>
                         <td id='foreignTax' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Tax Residencies Outside SA:</td>
                         <td id='taxResidencies' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>United States Citizen/National:</td>
                         <td id='usaCitizen' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Foreign Taxpayer ID Number issuer:</td>
                         <td id='foreignTaxCountryName' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Foreign Taxpayer Identification Number:</td>
                         <td id='foreignTaxIDNumber' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Reason for no Taxpayer Number:</td>
                         <td id='idreason' ></td>
                      </tr>
                   </tbody></table>
          </div>
          <div class='reviewSection'>
                   <h6 class='SectionHeader'>
                      <a href='login.php?client/details/sa-natural/bank' style='font-size:15px;'>Bank Details</a>
                   </h6>
                   <table class='SectionList' width='100%' style='border-collapse:separate;border:solid #f0eded 1px;border-radius:19px;-moz-border-radius:19px;'>
                      <colgroup><col width='250px'>
                      <col width=''>
                      </colgroup><tbody><tr>
                         <td style='padding-left:16px;border-top-left-radius:19px;'>Bank Name:</td>
                         <td style='border-top-right-radius:19px;' id='bank_name' > </td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Another Bank Name:</td>
                         <td id='another_bank' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Branch Code :</td>
                         <td id='branch_code' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Account Holder Name :</td>
                         <td id='account_holder_name' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Account Number :</td>
                         <td id='account_holder_number' ></td>
                      </tr>
                      <tr>
                         <td style='padding-left:16px;'>Account Type :</td>
                         <td id='account_type' ></td>
                      </tr>
                   </tbody></table>
          </div>
        </div>
            ";

            // require (TEMPLATES.'/login/client/sa-natural/contribution.php');
            // require (TEMPLATES.'/login/client/sa-natural/payment.php');
            // require (TEMPLATES.'/login/client/sa-natural/bank.php');
$WizardContent .= "


        <form role='form' id='sa-natural-review'>
            <div class='form-body padding-top10px'>

            <div class='form-group form-md-line-input'style='padding-top:0px !important'>
                <div class='col-md-10'>
                    <div class='md-checkbox-inline'>
                        <div class='md-checkbox'>
                            <input type='checkbox' id='termsWebsite' name='termsSABullion' class='md-check'>
                            <label for='termsWebsite'>
                                <span class='inc'></span>
                                <span class='check'></span>
                                <span class='box'></span> I have read, understood and agree to the terms and conditions governing the use of the SA Bullion website <a href='#' id='terms'> available here </a></label>
                        </div>
                    </div>
                </div>
            </div>

            <div class='form-group form-md-line-input'>
                <div class='col-md-10'>
                    <div class='md-checkbox-inline'>
                        <div class='md-checkbox'>
                            <input type='checkbox' id='termsClient' name='termsClient' class='md-check'>
                            <label for='termsClient'>
                                <span class='inc'></span>
                                <span class='check'></span>
                                <span class='box'></span> I have read, understood and agree to the terms and conditions contained in the client mandate <a href='#' id='mandate'> available here </a>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class='form-group form-md-line-input termsKrugerrand hidden' id='termsKrugerrand1'>
                <div class='col-md-10'>
                    <div class='md-checkbox-inline'>
                        <div class='md-checkbox'>
                            <input type='checkbox' id='termsKrugerrand' name='termsKrugerrand' class='md-check'>
                            <label for='termsKrugerrand'>
                                <span class='inc'></span>
                                <span class='check'></span>
                                <span class='box'></span>I would like to participate in the <a href='#' id='FractionalOwnershipPolicy'>Krugerrand Fractional-Ownership Programme</a> and get maximum gold exposure with every Rand invested.
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class='form-group form-md-line-input termsKrugerrand hidden' id=termsKrugerrand2>
                <div class='col-md-10'>
                    <div class='md-checkbox-inline'>
                        <div class='md-checkbox'>
                            <input type='checkbox' id='termsKrugerrandPolicy' name='termsKrugerrandPolicy' class='md-check'>
                            <label for='termsKrugerrandPolicy'>
                                <span class='inc'></span>
                                <span class='check'></span>
                                <span class='box'></span>I have read, understood and agree to the terms and conditions contained in the Krugerrand Fractional-Ownership Programme <a href='https://sabullion.co.za/wp-content/uploads/2021/03/Krugerrand-Fractional-Ownership-Programme-brochure.pdf' target=_blank id='FractionalOwnershipBrochure'>available here</a>
                            </label>
                        </div>
                    </div>
                </div>
            </div>


            <div class='form-group form-md-line-input'>
                <div class='col-md-10' style='text-align: center;'>
                  <label for='sigCanvas'>
                     <span class='inc'></span>
                     <span class='box'></span>
                  </label>
                  <canvas id='sigCanvas' name='sigCanvas' width='685' height='200' style='border:1px solid #000000;'></canvas>
                  <div style='height: 25px'>&nbsp</div>
                  <div id='clearSig' style='padding-left: 50px;'><button type='button' class='btn white btn-lg' style='height: 30px;' id='clearSignature' onclick='signaturePad.clear()'>Clear Signature</button></div>
                </div>
            </div>

            <div class='clearfix margin-bottom-40'></div>

            <div class='form-actions noborder button-right'>
                <a href='#'class='padding-right'>
                    <button type='button' class='btn purple btn-lg' id='submit'>Submit</button>
                </a>
            </div>

            <div class='form-actions noborder'>
                <a href='#' class='padding-left'>
                    <button type='button' class='btn white btn-lg' id='backButton'>Back</button>
                </a>
            </div>
            <script src='https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js'></script>
            <script>
               var sigCanvas = document.querySelector('#sigCanvas');
               var signaturePad = '';
               
               window.addEventListener('load', function()
               {
                  signaturePad = new SignaturePad(sigCanvas);
               });
            </script>
        </form>
    </div>
";

require("layout_basic.php");

//echo "<div id='PDF' style='margin: 40px; display: none' >".require (ROOT.'/pdf/clients/sa-natural.php')."</div>";

?>
