<?php
/**
 * Created by PhpStorm.
 * User: roysinclair
 * Date: 2016/02/29
 * Time: 8:33 AM
 */

?>

<div class="row">


    <div class="col-md-10 col-md-offset-1">
        <div class="mt-element-step">
            <div class="row step-line">

                <div class="col-md-2 mt-step-col first done">
                    <div class="mt-step-title">Personal Details</div>

                </div>
                <div class="col-md-2 mt-step-col done">
                    <div class="mt-step-title">Product Selection</div>

                </div>
                <div class="col-md-2 mt-step-col done">
                    <div class="mt-step-title">Transaction Details</div>

                </div>
                <div class="col-md-2 mt-step-col">
                    <div class="mt-step-title">Bank Details</div>

                </div>
                <div class="col-md-2 mt-step-col">
                    <div class="mt-step-title">Login Details</div>

                </div>
                <div class="col-md-2 mt-step-col last">
                    <div class="mt-step-title">Review & Submit</div>

                </div>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="<?php echo $boxSize ?>">

        <div class="circle-small">
            <h5 class="margin-top-30">Questions?</h5>
            <p class="small text-center">Please don't hesitate to contact us if you have any queries</p>
            <h5>business@sabullion.co.za</h5>
            <h5>+27 21 447 3240</h5>
        </div>

        <h1 class="text-center">Contribution</h1>
        <h5 class="text-center">Choose the way you would like to contribute and your <br> Investment or Savings Amount</h5>

        <form role="form" id="sa-natural-contribution">
            <div class="form-body padding-top35px">

                <div class="form-group form-md-line-input">
                    <div class="col-md-10">
                        <div class="md-radio-list">
                            <div class="md-radio">
                                <input type="radio" id="onceOff" name="contribution" class="md-radiobtn" value="onceOff">
                                <label for="onceOff">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span>Would you like contribute once off ?</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- HIDDEN UNTIL Would you like contribute once off ? is CLICKED -->
                <div id="onceOffContent" class="hiddenContent">

                    <!-- GIVE ME SPACE -->
                    <div class="clearfix margin-bottom-40"></div>
                    <!-- OK THAT IS ENOUGH :) -->

                    <div class="form-group form-md-line-input" id="onceOffAmount" >
                        <input type="number" class="form-control input-lg" value="">
                        <label for="form_control_1">Amount</label>
                        <span class="help-block hiddenContent"></span>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label" id="onceOffSource">
                        <select class="form-control edited input-lg">
                            <option value="NONE" selected="">Please select</option>
                            <?php

                            $pdo = $SA->query("SELECT type FROM inputsource");
                            $pdo->execute();
                            $results = $pdo->fetchAll();

                            foreach ($results as $row) {

                                echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';

                            }

                            ?>
                        </select>
                        <label for="form_control_1">Source of fund ?</label>
                        <span class="help-block hiddenContent"></span>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label" id="onceOffSource">
                        <select class="form-control edited input-lg">
                            <option value="NONE" selected="">Please select</option>
                            <?php

                            $pdo = $SA->query("SELECT type FROM input_payment_method");
                            $pdo->execute();
                            $results = $pdo->fetchAll();

                            foreach ($results as $row) {

                                echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';

                            }

                            ?>
                        </select>
                        <label for="form_control_1">Payment method</label>
                        <span class="help-block hiddenContent"></span>
                    </div>

                    <div class="form-actions noborder">
                        <div class="padding-top52px"></div>
                        <a href="#">
                            <button type="button" class="btn purple btn-lg">Continue</button>
                        </a>

                    </div>
                </div>
                <!-- END: HIDDEN UNTIL Would you like contribute once off ? is CLICKED -->

                <div class="form-group form-md-line-input">
                    <div class="col-md-10">
                            <div class="md-radio margin-top-20">
                                <input type="radio" id="recurring" name="contribution" class="md-radiobtn" value="recurring">
                                <label for="recurring">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span> Would you like to make a recurring monthly debit ? </label>
                            </div>
                        </div>
                    </div>
                </div>


            <!-- HIDDEN UNTIL Would you like contribute once off ? is CLICKED -->
            <div id="recurringContent" class="hiddenContent">

                <!-- GIVE ME SPACE -->
                <div class="clearfix margin-bottom-40"></div>
                <!-- OK THAT IS ENOUGH :) -->

                <div class="form-group form-md-line-input" id="recurringAmount" >
                    <input type="number" class="form-control input-lg" value="">
                    <label for="form_control_1">Amount</label>
                    <span class="help-block hiddenContent"></span>
                </div>

                <div class="form-group form-md-line-input form-md-floating-label" id="recurringSource">
                    <select class="form-control edited input-lg">
                        <option value="NONE" selected="">Please select</option>
                        <?php

                        $pdo = $SA->query("SELECT type FROM inputsource");
                        $pdo->execute();
                        $results = $pdo->fetchAll();

                        foreach ($results as $row) {

                            echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';

                        }

                        ?>
                    </select>
                    <label for="form_control_1">Source of fund ?</label>
                    <span class="help-block hiddenContent"></span>
                </div>

                <div class="form-group form-md-line-input form-md-floating-label" id="recurringDay">
                    <select class="form-control edited input-lg">
                        <option value="NONE" selected="">Please select</option>
                        <?php

                        for ($i = 1; $i <= 31; $i++){

                            echo '<option value="'.$i.'">'.$i.'</option>';

                        }

                        ?>
                    </select>
                    <label for="form_control_1">Payment Collection Day</label>
                    <span class="help-block hiddenContent"></span>
                </div>

                <div class="form-group form-md-line-input form-md-floating-label" id="recurringMonth">
                    <select class="form-control edited input-lg">
                        <option value="NONE" selected="">Please select</option>
                        <option value="01">January</option>
                        <option value="02">February</option>
                        <option value="03">March</option>
                        <option value="04">April</option>
                        <option value="05">May</option>
                        <option value="06">June</option>
                        <option value="07">July</option>
                        <option value="08">August</option>
                        <option value="09">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                    <label for="form_control_1">Start Month ?</label>
                    <span class="help-block hiddenContent"></span>
                </div>

                <div class="form-group form-md-line-input form-md-floating-label" id="recurringEscalation">
                    <select class="form-control edited input-lg">
                        <option value="NONE" selected="">Please select</option>
                        <?php

                        for ($i = 0; $i <= 100; $i += 5){

                            echo '<option value="'.$i.'">'.$i.'%</option>';

                        }

                        ?>
                    </select>
                    <label for="form_control_1">Annual Escalation</label>
                    <span class="help-block hiddenContent"></span>
                </div>

                <div class="form-actions noborder">
                    <div class="padding-top52px"></div>
                    <a href="#">
                        <button type="button" class="btn purple btn-lg">Continue</button>
                    </a>
                </div>

            </div>
            <!-- END: HIDDEN UNTIL Would you like contribute once off ? is CLICKED -->

        </form>

        <div class="clearfix margin-bottom-40"></div>

    </div>


</div>

