<style>
    #radioBtn .notActive{
        color: #3276b1;
        background-color: #fff;
    }
</style>


<div class="panel"> 
    <div class="panel-body">
        <form role="form" class="form-horizontal" action="<?= base_url('child_submit'); ?>" method="POST">
            <h2 class="text-center">Child Registration Form</h2>  
            <hr class="colorgraph">

            <div class="row">
                <div class="col-md-5 col-md-push-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true"></i><strong>House Number</strong></span>
                            <select name="house_number" id="house_number" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select house number</option>
                                <?php
                                if (isset($house_list) and $house_list) {
                                    for ($i = 0; $i < count($house_list); $i++) {
                                        ?>
                                        <option value=<?= $house_list[$i]['auto_id'] ?>><strong><?= $house_list[$i]['house_number'] ?></strong></option>
                                        <?php
                                    }
                                }
                                ?>
                            </select>
                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                        </div>                    
                    </div> 
                </div>
                <div class="col-md-1 col-md-push-3 spinner" id="women_level_spinner" style="display: none;margin-top: 5px">
                    <i class="fa fa-spinner fa-spin"></i>
                </div>
            </div>



            <div class="row">
                <div class="col-md-5 col-md-offset-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true"></i><strong>Select Mother</strong></span>
                            <select name="women_id" id="women_id" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select Mother</option>

                            </select>
                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                        </div>                    
                    </div> 
                </div>
            </div>





            
            <div class="row">
                <div class="col-md-5 col-md-push-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Child Full Name</span>
                            <input class="form-control" required name="child_full_name"type="text" placeholder="Please enter child name">
                        </div>                    
                    </div>
                </div>
            </div> 
            <div class="row">
                <div class="col-md-4 col-md-push-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true"></i><strong>Gender</strong></span>
                            <select name="gender" required class="form-control">
                                <option value="0" disabled="true" selected="true"> Select Gender</option>
                                <option value="1"> <strong>Male</strong></option>
                                <option value="2"> <strong>Female</strong></option>
                                <option value="3"><strong>Other</strong></option>
                            </select>
                            <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                        </div>                    
                    </div> 
                </div>
            </div>
            <div class="row"> 
                <div class="col-md-4 col-md-push-3">
                    <div class="form-group">
                        <div class="input-group date" id="lpm_date_pregnant" data-date-fromat="dd-mm-yyyy" style="color: white">
                            <span class="input-group-addon"><strong>Child DOB</strong></span>
                            <input class="form-control" type="text" name="child_dob" id="lpm_date_input" required placeholder="dd-mm-yyyy">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>                    
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                    <?php $this->load->view('mira_alert_message'); ?>
                </div>
            </div>
            <hr class="colorgraph">
            <div class="row">
                <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2"><input type="submit" value="Child Registration" class="btn btn-primary btn-lg btn-block"></div>            
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#house_number').change(function () {
            $('#women_level_spinner').css('display', 'block');
            $('#women_id').children('option:not(:first)').remove();

            $.ajax({
                url: '<?= base_url('get_women') ?>',
                data: {
                    house_id: $(this).val()
                },
                type: "POST",
                success: function (json) {
                    var data = $.parseJSON(json);
                    if (data['women_list']) {
                        for (var i = 0; i < data['women_list'].length; i++) {
                            $("#women_id").append($("<option></option>").val(data['women_list'][i]['women_id']).html(data['women_list'][i]['name']));
                        }
                    }
                },
                error: function (xhr, status, errorThrown) {
                    $('#women_level_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    $('#women_level_spinner').css('display', 'none');
                }
            });

        });
        $('#lpm_date_pregnant').datepicker({autoclose: true, format: 'dd-mm-yyyy'});
    });

</script>

